Эта разметка будет выглядеть примерно так:

Всего у нас есть

  артикул п {
  цвет: бордовый;
}
  

  article p: nth-child (odd) {
  цвет: золотарник;
}
  

  <статья>
   
 Вот заголовок 
 
  
 Я - абзац со всевозможной информацией.  
  
 Давайте добавим еще один абзац для развлечения. 
  
 йадда йадда йадда 
  
 бла-бла-бла 
  
 йадда йадда йадда 
   
 Вот подзаголовок 
 
  
 бла-бла-бла 
  
 И, может быть, еще один.

  артикул п {
  цвет: бордовый;
}

article p: nth-of-type (odd) {
  цвет: золотарник;
}
  

Цвет по умолчанию по-прежнему темно-бордовый, но теперь мы выбираем только нечетные элементы абзаца.

Стили теперь применяются, если элемент соответствует следующему требованию:

• Элемент — это абзац с родительским элементом article.
• Из выбранных выше абзацев выбираются только нечетные.

Если мы снова посмотрим на это с аннотациями, станет немного яснее, как они выбираются.

Заголовки (

.

Используете ли вы nth-child или nth-of-type , в конечном итоге будет зависеть от вашей цели стилизации.

Как правило, если вы хотите выбрать интервал селектора независимо от типа элемента, используйте nth-child . Однако, если вы хотите выбрать только определенный тип и применить оттуда выбор интервала, используйте nth-of-type .

Заключение

Селекторы nth-child и nth-of-type имеют отличную поддержку браузера. Проверьте nth-child и nth-of-type на CanIUse.com для получения более подробной информации.

Для более полного обзора языка разметки HTML5 ознакомьтесь с нашей серией статей «Как создать веб-сайт в HTML».

Селекторы псевдоклассов — Мастерская по макету CSS

Селектор псевдокласса действует так, как если бы вы добавили класс к элементу в вашей разметке.

Мастерская по макету CSS: селекторы псевдоклассов

Вы, вероятно, знакомы как минимум с двумя селекторами псевдокласса, теми, которые мы используем для выбора состояний ссылки.

  a: ссылка {}
а: посетил {}  

Эти селекторы работают так, как если бы они добавляли класс в зависимости от состояния ссылки. В этом случае независимо от того, посещена ли ссылка или нет.

Другие псевдоклассы, которые мы могли бы использовать для ссылки, на самом деле динамических псевдоклассов . Они применяются в зависимости от того, что происходит в документе. Ссылка, на которую наведен курсор, добавлена ​​вкладка или активирована.

  a: hover {}
a: active {}
a: focus {}  

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

У нас есть еще несколько полезных псевдоклассов, с которыми можно поиграть.

: первенец

Назначьте элемент, если он является первым дочерним элементом родительского элемента.

Селектор first-child был частью CSS2.1. В этом примере у нас есть набор абзацев.

  

 Абзац первый. 
 Абзац второй 
  

Чтобы применить CSS только к первому абзацу внутри оболочки , мы используем селектор first-child.

  .wrapper p: first-child {}  

Это работает, только если есть элемент абзаца как первый элемент непосредственно внутри этого контейнера. Если мы добавим здесь заголовок первого уровня, то селектор first-child больше не будет выбирать абзац.

: последний ребенок

Целевой элемент, если он является последним дочерним элементом родительского элемента.

Спецификация Selectors Level 3 принесла нам несколько новых селекторов псевдокласса. Селектор last-child похож на first-child, за исключением того, что он нацелен на последнего дочернего элемента родителя.

  .wrapper p: last-child {}  

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

: ребенок

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

Селектор nth-child действительно очень полезен. Простым примером является использование этого селектора для чередования строк таблицы.

  <таблица>
  
     Имя 
     Любимый цвет 
     Любимое животное 
  
  
     Рэйчел 
     Фиолетовый 
     Кот 
  
    
     Джо 
     Розовый 
     Альбатрос 
  
    
     Элоиза 
     Зеленый 
     Слаг 
  
  

Мы можем применить CSS к нечетным строкам с помощью следующего селектора.

  tr: nth-child (odd) {} ​​ 

Или четных строк:

  tr: nth-child (even) {}  

Эти ключевые слова — не единственный способ использовать nth-child. Мы можем настроить таргетинг на конкретную строку. Этот селектор только выберет строку 2.

  tr: nth-child (2) {}  

Значение ключевого слова odd равно этому селектору, в котором мы выбираем первый элемент и каждый второй элемент после него.

  tr: nth-child (2n + 1) td {}  

Есть несколько отличных ресурсов, которые помогут вам понять, как работает nth-child.Вместо того, чтобы воспроизводить все это, взгляните на:

: n-й тип

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

После того, как вы разобрались с тем, как работает nth-child, вы можете использовать тот же синтаксис для nth-of-type . Этот селектор выбирает только те элементы, которые относятся к тому же типу, что и элемент, к которому он применяется.

В моем примере ниже показаны заголовки и абзацы.

Чтобы применить CSS ко всем остальным абзацам, но игнорировать заголовки, я мог бы использовать следующий селектор.

  p: nth-of-type (odd) {} ​​ 

: только ребенок

Псевдокласс only-child будет соответствовать, если элемент является единственным дочерним элементом родительского элемента — например, список с одним элементом списка.

  li: только ребенок {}  

Это может быть полезным селектором при проектировании переменного количества контента, поступающего из CMS.

: пусто

пустой псевдокласс будет соответствовать, если элемент полностью пуст или содержит только HTML-комментарий.

  п: пусто {}  

Не будет совпадать, если внутри элемента есть пробелы.

пустой псевдокласс будет соответствовать первым двум, но не последнему абзацу.

: не

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

  td: not (.animal) {
  font-weight: жирный;
}  

nth-ребенок против nth-of-типа

Селекторы nth-child () и nth-of-type () являются «структурными» псевдоклассами, которые позволяют нам выбирать элементы на основе информации в дереве документа, которая обычно не может быть представлена другие простые селекторы.

В случае nth-child () и nth-of-type () дополнительная информация — это позиция элемента в дереве документа по отношению к его родителю и братьям и сестрам. Хотя эти два псевдокласса очень похожи, они работают по-разному.

Как работает

Псевдокласс nth-child () используется для сопоставления элемента на основе числа, которое представляет позицию элемента среди его братьев и сестер.Более конкретно, число представляет количество братьев и сестер, которые существуют перед элементом в дереве документа (минус 1).

Это число выражается как функция, an + b , где n — это индекс, а a и b — любые передаваемые нами целые числа. Например, чтобы выбрать каждый элемент, мы могли бы написать любое из следующего —

 : nth-child (1n + 0) {/ * стили * /}
: nth-child (n + 0) {/ * стили * /}
: nth-child (1n) {/ * стили * /}
  

В дополнение к этой функции мы можем передать одно целое число e. грамм. : nth-child (1) или используйте одно из заданных ключевых слов, нечетное или четное . Эти ключевые слова являются альтернативой написанию функциональной записи для выбора каждого нечетного или четного элемента.

 : nth-child (odd) {/ * стили для нечетных элементов * /}
: nth-child (2n + 1) {/ * стили для нечетных элементов * /}

: nth-child (even) {/ * стили для четных элементов * /}
: nth-child (2n + 0) {/ * стили для четных элементов * /}
  

При использовании : nth-child () отдельно, достаточно просто предсказать, какой элемент будет выбран.Например, используя эту разметку —

  

 Это  абзац . 
 Это  абзац . 
 Это  абзац . 
 Это  разделитель . 
 Это  разделитель . 
 
 Это  абзац . 
 Это  абзац .
 Это  разделитель .  
 Это  абзац . 
 Это  разделитель . 

  

Если бы мы хотели выбрать пятый элемент, div, мы могли бы просто написать следующее —

  .example: nth-child (5) {background: # ffdb3a; }
  

Однако могут возникнуть непредвиденные результаты, если существует несколько типов элементов, и нам нужно объединить псевдокласс : nth-child () с селекторами типа или класса.Например, чтобы снова выбрать тот же самый элемент div, у нас может возникнуть соблазн написать следующее —

  .example div: nth-child (2) {background: # ffdb3a; }
  

Примечание — работать не будет

Причина, по которой это не сработает, заключается в том, что элемент, на который нацелен селектор, на самом деле не существует. Используя указанный выше селектор, пользовательский агент выполнит следующие шаги —

1. Выберите все дочерние элементы . Пример
2. Найдите второй элемент в этом списке, независимо от типа
3. Проверить, является ли этот элемент типом div

Поскольку второй элемент в дереве документа является абзацем, а не блоком div, ничего не выделяется. Если бы мы хотели выбрать второй элемент div, нам пришлось бы использовать псевдокласс nth-of-type () .

Как работает

Псевдокласс nth-of-type () , например nth-child () , используется для сопоставления элемента на основе числа. Это число, однако, представляет позицию элемента в пределах только тех из его братьев и сестер, которые относятся к тому же типу элемента .

Это число также может быть выражено как функция или с помощью ключевых слов четный или нечетный .Используя пример разметки выше, мы можем выделить все нечетные абзацы, написав —

  .example p: nth-of-type (odd) {background: # ffdb3a; }
  

Когда мы используем этот селектор, пользовательский агент выполняет следующие шаги —

1. Выберите все дочерние элементы . Example , которые имеют тип p
2. Создать новый список только из этих элементов
3. Выберите нечетные числа из этого списка

Из-за этого теперь мы можем выбрать второй div, пятый дочерний элемент . например —

  .example div: nth-of-type (2) {/ * стили * /}
  

Другие псевдоклассы «nth»

Помимо nth-child () и nth-of-type () , есть ряд других структурных псевдоклассов, которые мы можем использовать для выбора элементов на основе их положения в пределах их братьев и сестер. Подобно nth-child () и nth-of-type () , они делятся на две группы: те, которые не зависят от типа , например nth-child () , и те, которые являются зависящий от типа , например nth-of-type () .

Отсчет от конца —

Эти псевдоклассы работают как nth-child () и nth-of-type () , но они начинают отсчет с последнего элемента в группе братьев и сестер вместо первого.

  .example: nth-last-child (1) {background: # a6cae7; }
.example p: nth-last-of-type (1) {фон: # ffdb3a; }
  

Первый элемент —

Псевдоклассы first-child () и first-of-type () выбирают первый элемент. Их можно представить как использующие псевдоклассы nth-child () и nth-of-type () , но просто передавая значение 1.

  .example: first-child () {/ * стили * /}
.example: nth-child (1) {/ * стили * /} / * то же, что и выше * /

.example: first-of-type () {/ * стили * /}
.example: nth-of-type (1) {/ * стили * /} / * такие же, как указано выше * /
  

Последний элемент —

Это противоположность псевдоклассам first-child () и first-of-type () . Их можно рассматривать как использование псевдоклассов nth-last-child () и nth-last-of-type () , но с передачей значения 1.

  .example: last-child () {/ * стили * /}
.example: nth-last-child (1) {/ * стили * /} / * такие же, как указано выше * /

.example: last-of-type () {/ * стили * /}
.example: nth-last-of-type (1) {/ * стили * /} / * такие же, как указано выше * /
  

The Only Element —

Наконец, эти псевдоклассы выберут единственный дочерний элемент. Для only-child () элемент должен быть буквально единственным дочерним элементом своего родителя, независимо от типа.Для only-of-type () элемент должен быть только единственным дочерним элементом своего типа.

  .example: only-child () {/ * стили * /}

.example p: only-of-type () {/ * стили * /}