Селектор CSS для первого элемента с classом

У меня есть куча элементов с именем classа red , но я не могу выбрать первый элемент с class="red" используя следующее правило CSS:

Что не так в этом селекторе и как его исправить?

Благодаря комментариям, я понял, что элемент должен быть первым дочерним элементом его родителя, чтобы получить выбранный, который не тот, который у меня есть. У меня есть следующая структура, и это правило не выполняется, как указано в комментариях:

 .home .red:first-child { border: 1px solid red; } 
 
blah

first

second

third

fourth

Как настроить таргетинг на первого ребенка с classом red ?

Это один из самых известных примеров непонимания авторов :first-child как работает :first-child . Введенный в CSS2 :first-child псевдо-class :first-child представляет собой самый первый дочерний элемент его родителя . Вот и все. Существует очень распространенное заблуждение, что он выбирает, какой дочерний элемент является первым, чтобы соответствовать условиям, указанным остальным составным селектором. Из-за того, как работают селекторы (см. Здесь объяснение), это просто неверно.

Селекторы уровня 3 вводят псевдоclass :first-of-type , который представляет первый элемент среди братьев и сестер его типа элемента. Этот ответ объясняет, с иллюстрациями, разницу между :first-child и :first-of-type . Однако, как и в случае с :first-child , он не смотрит на какие-либо другие условия или атрибуты. В HTML тип элемента представлен именем тега. В вопросе этот тип – p .

К сожалению, нет аналогичного :first-of-class псевдоclass classа первого classа для сопоставления первого дочернего элемента данного classа. Одним из обходных решений, с которыми мы с Лией Веро воспользовались для этого (хотя и совершенно независимо), является прежде всего применение ваших желаемых стилей ко всем вашим элементам с этим classом:

 /* * Select all .red children of .home, including the first one, * and give them a border. */ .home > .red { border: 1px solid red; } 

… затем «отменить» стили для элементов с classом, которые приходят после первого , используя общий комбинированный комбинатор ~ в главном правиле:

 /* * Select all but the first .red child of .home, * and remove the border from the previous rule. */ .home > .red ~ .red { border: none; } 

Теперь только первый элемент с class="red" будет иметь границу.

Вот пример того, как применяются правила:

 
blah

first

second

third

fourth

  1. Правила не применяются; никакой границы не отображается.
    Этот элемент не имеет classа red , поэтому его пропускают.

  2. Применяется только первое правило; отображается красная рамка.
    Этот элемент имеет class red , но ему не предшествуют какие-либо элементы с classом red в его родительском. Таким образом, второе правило не применяется, только первое, а элемент сохраняет свою границу.

  3. Оба правила применяются; никакой границы не отображается.
    Этот элемент имеет class red . Этому также предшествует по крайней мере один другой элемент с classом red . Таким образом, применяются оба правила, а вторая border декларация переопределяет первую, тем самым «отменяя» ее, так сказать.

В качестве бонуса, хотя он был представлен в селекторах 3, общий синонимов-комбинатор на самом деле довольно хорошо поддерживается IE7 и новее, в отличие от :first-of-type и :nth-of-type() которые поддерживаются только IE9 , Если вам нужна хорошая поддержка браузера, вам повезло.

Фактически, тот факт, что комбинатор-сиблинг является единственным важным компонентом в этой технике и обладает такой удивительной поддержкой браузера, делает эту технику очень универсальной – вы можете адаптировать ее для фильтрации элементов другими вещами, помимо селекторов classов:

  • Вы можете использовать это для работы :first-of-type в IE7 и IE8, просто поставляя селектор типов вместо селектора classов (опять же, больше о его неправильном использовании здесь в следующем разделе):

     article > p { /* Apply styles to article > p:first-of-type, which may or may not be :first-child */ } article > p ~ p { /* Undo the above styles for every subsequent article > p */ } 
  • Вы можете фильтровать с помощью селекторов атрибутов или любых других простых селекторов вместо classов.

  • Вы также можете комбинировать этот метод переопределения с псевдоэлементами, хотя псевдоэлементы технически не являются простыми селекторами.

Обратите внимание, что для того, чтобы это сработало, вам нужно будет заранее знать, какие стили по умолчанию будут для ваших других элементов sibling, чтобы вы могли переопределить первое правило. Кроме того, поскольку это связано с переопределением правил в CSS, вы не можете добиться того же самого с помощью одного селектора для использования с API-интерфейсом Selectors или локаторами CSS Selenium .

Стоит отметить, что Selectors 4 представляет расширение для :nth-child() нотации (первоначально полностью новый псевдоclass classа :nth-match() ), который позволит вам использовать что-то вроде :nth-child(1 of .red) вместо гипотетического .red:first-of-class . Будучи относительно недавним предложением, недостаточно совместимых реализаций для его использования на производственных площадках. Надеюсь, это скоро изменится. Тем временем обходной путь, который я предложил, должен работать в большинстве случаев.

Имейте в виду, что этот ответ предполагает, что вопрос ищет каждый первый дочерний элемент, который имеет данный class. Для n-го совпадения сложного селектора по всему документу нет ни псевдо-classа, ни даже общего решения CSS, независимо от того, существует ли решение, в значительной степени зависит от структуры документа. jQuery предоставляет :eq() :first :last и more для этой цели, но обратите внимание, что они работают по-разному :nth-child() et al . Используя API Selectors, вы можете использовать document.querySelector() для получения первого совпадения:

 var first = document.querySelector('.home > .red'); 

Или используйте document.querySelectorAll() с индексом, чтобы выбрать любое конкретное соответствие:

 var redElements = document.querySelectorAll('.home > .red'); var first = redElements[0]; var second = redElements[1]; // etc 

Хотя решение .red:nth-of-type(1) в оригинальном принятом ответе Филиппа Дабмайера работает (которое первоначально было написано Мартином, но удалено с тех пор), оно не ведет себя так, как вы ожидали.

Например, если вы только хотели выбрать p в исходной разметке:

 

… тогда вы не можете использовать .red:first-of-type (эквивалентно .red:nth-of-type(1) ), потому что каждый элемент является первым (и единственным) одним из его типов ( p и div соответственно), поэтому оба будут соответствовать селектору.

Когда первый элемент определенного classа также является первым его типом , псевдоclass будет работать, но это происходит только по совпадению . Такое поведение продемонстрировано в ответе Филиппа. В тот момент, когда вы вставите элемент того же типа перед этим элементом, селектор завершится с ошибкой. Принимая обновленную разметку:

 
blah

first

second

third

fourth

Применение правила с .red:first-of-type будет работать, но как только вы добавите еще один p без classа:

 
blah

dummy

first

second

third

fourth

… селектор немедленно выйдет из строя, потому что первый .red элемент теперь является вторым элементом p .

Селектор :first-child предназначен, как и название, для выбора первого дочернего элемента родительского тега. Дети должны быть встроены в один и тот же родительский тег. Ваш точный пример будет работать (просто попробовал это здесь ):

  

first

second

Возможно, вы вложили tags в разные tags родителя? Являются ли ваши tags classа red действительно первыми тегами у родителя?

Также обратите внимание, что это не относится только к первому такому тегу во всем документе, но каждый раз, когда вокруг него обматывается новый родитель, например:

 

first

second

third

fourth

first и third будут красными.

Обновить:

Я не знаю, почему мартин удалил свой ответ, но у него было решение :nth-of-type селектор :nth-of-type :

      
blah

first

second

third

fourth

Кредиты Мартыну . Здесь, например, больше информации. Имейте в виду, что это селектор CSS 3, поэтому не все браузеры его распознают (например, IE8 или старше).

Правильный ответ:

 .red:first-child, :not(.red) + .red { border:5px solid red } 

Часть I: если элемент является первым для своего родителя и имеет class «красный», он должен получить границу.
Часть II: Если элемент «.red» не является первым для своего родителя, но сразу же следует за элементом без classа «.red», он также заслуживает честь этой границы.

Скрижали или этого не случилось.

Ответ Филиппа Даубмайера, хотя и принят, неверен – см. Прилагаемую скрипку.
Ответ BoltClock будет работать, но без необходимости определяет и перезаписывает стили
(особенно проблема, когда она иначе наследует другую границу – вы не хотите объявлять другую границу: нет)

РЕДАКТИРОВАТЬ: В случае, если у вас есть «красный» после не красных несколько раз, каждый «первый» красный получит границу. Чтобы этого избежать, нужно будет использовать ответ BoltClock. Смотрите скрипку

вы можете использовать first-of-type или first-of-type nth-of-type(1)

 .red { color: green; } /* .red:nth-of-type(1) */ .red:first-of-type { color: red; } 
 
blah

first

second

third

fourth

Чтобы соответствовать вашему селектору, элемент должен иметь имя classа red и должен быть первым дочерним элементом его родителя.

 
Blah

Blah

Поскольку другие ответы касаются того, что с ним не так, я попробую другую половину, как это исправить. К сожалению, я не знаю, что у вас есть только CSS- решение, по крайней мере, не то, о чем я могу думать . Есть еще некоторые варианты, хотя ….

  1. Назначьте first class элементу при его создании, например:

     

    CSS:

     .first.red { border:5px solid red; } 

    Этот CSS соответствует только элементам с first и red classами.

  2. В качестве альтернативы, сделайте то же самое в JavaScript, например, вот что вы можете использовать для jQuery, используя тот же CSS, что и выше:

     $(".red:first").addClass("first"); 

Согласно вашей обновленной проблеме

 
blah

first

second

third

fourth

как насчет

 .home span + .red{ border:1px solid red; } 

Это позволит выбрать class дома , затем пропустить элемент и, наконец, все .red элементы , которые размещаются сразу после элементов span.

Ссылка: http://www.w3schools.com/cssref/css_selectors.asp

Вы можете изменить свой код на что-то подобное, чтобы заставить его работать

 
blah

first

second

third

fourth

Это делает вам работу

 .home span + .red{ border:3px solid green; } 

Вот ссылка на CSS от SnoopCode .

Я использую ниже CSS, чтобы иметь фоновое изображение для списка ul li

 #footer .module:nth-of-type(1)>.menu>li:nth-of-type(1){ background-position: center; background-image: url(http://sofru.miximages.com/css/icon-home.png); background-repeat: no-repeat; } 
 

Вы можете использовать nth-of-type (1), но убедитесь, что сайту не нужно поддерживать IE7 и т. Д., Если это так, используйте jQuery для добавления classа body, затем найдите элемент через class тела IE7, затем имя элемента, затем добавьте в стиле nth-child.

Попробуй это :

  .class_name > *:first-child { border: 1px solid red; } 

Я получил это в своем проекте.

 div > .b ~ .b:not(:first-child) { background: none; } div > .b { background: red; } 
 

The first paragraph.

The second paragraph.

The third paragraph.

The fourth paragraph.

По какой-то причине ни один из вышеперечисленных ответов, казалось, не рассматривал случай реального первого и только первого ребенка родителя.

 #element_id > .class_name:first-child 

Все приведенные выше ответы не удастся, если вы хотите применить стиль только к первоclassному ребенку в этом коде.

  

Попробуйте этот простой и эффективный

  .home > span + .red{ border:1px solid red; } 

Попробуйте это решение:

  .home p:first-of-type { border:5px solid red; width:100%; display:block; } 
 
blah

first

second

third

fourth

Вышеуказанные ответы слишком сложны.

 .class:first-of-type { } 

Это выберет class первого типа. Источник MDN

Нужно только сначала и только один абзац сделать красным. Как?

  

Needed only first and only one paragraph had red. How?

The first paragraph.

The second paragraph.

The third paragraph.

The fourth paragraph.

Я считаю, что использование относительного селектора + для выбора элементов, размещенных сразу после, работает здесь лучше всего (как это было предложено ранее).

Также возможно, чтобы этот случай использовал этот селектор

 .home p:first-of-type 

но это элемент селектора не classа.

Здесь у вас есть хороший список селекторов CSS: https://kolosek.com/css-selectors/

  • LESS CSS: злоупотребление & Operator при вложенности?
  • Как написать: условие зависания для: before и a: after?
  • Селекторы атрибутов CSS: правила кавычек ("," или none?)
  • Есть ли селектор CSS по префиксу classа?
  • Можете ли вы настроить элемент с помощью CSS только в том случае, если присутствуют 2 classа?
  • CSS3, объединяющий селекторы с OR вместо AND
  • Оберните каждые 3 divs в div
  • Почему этот фильтр CSS: not () не фильтруется?
  • Селектор CSS, который применяется к элементам с двумя classами
  • Почему .foo a: link, .foo a: visited {} селектор переопределяет: hover, a: active {} селектор в CSS?
  • Что означают запятые и пробелы в нескольких classах в CSS?
  • Давайте будем гением компьютера.