Псевдоклассы группы type

Время чтения: меньше 5 мин

Кратко

Псевдоклассы -of-type позволяют выбирать из группы элементы одного уровня вложенности на основании их порядка:

:first-of-type — первый;
:nth-of-type(n-число) — каждый n-й элемент;
:last-of-type — последний;
:nth-last-of-type(n-число) — каждый n-й элемент с отсчётом «с конца».

Пример

Допустим, мы имеем такую HTML-разметку:

        
          
          <ol class="list">  <li>Default означает «по умолчанию», цвет этого пункта без изменений.</li>  <li class="list__item">Амбары красят в красный цвет, потому что красная краска...</li>  <li>Говорят, в СССР красили подъезды в зелёный цвет, потому что осталось...</li>  <li class="list__item">В Катаре красят асфальт в синий цвет, чтобы он не перегревался.</li>  <li class="list__item">Газовые трубы красят в жёлтый цвет по ГОСТ 14202-69.</li>  <li class="list__item">Розы красят в синий цвет при помощи пищевых красителей.</li>  <li class="list__item">Чёрный на чёрном не виден.</li></ol>
          <ol class="list">
  <li>Default означает «по умолчанию», цвет этого пункта без изменений.</li>
  <li class="list__item">Амбары красят в красный цвет, потому что красная краска...</li>
  <li>Говорят, в СССР красили подъезды в зелёный цвет, потому что осталось...</li>
  <li class="list__item">В Катаре красят асфальт в синий цвет, чтобы он не перегревался.</li>
  <li class="list__item">Газовые трубы красят в жёлтый цвет по ГОСТ 14202-69.</li>
  <li class="list__item">Розы красят в синий цвет при помощи пищевых красителей.</li>
  <li class="list__item">Чёрный на чёрном не виден.</li>
</ol>

И, допустим, нам нужно задать цвет текста каждого из пунктов, основываясь на их порядке.

Этот пункт не имеет класса, всё, что мы о нём знаем — что он третий <li> по порядку:

        
          
          li:nth-of-type(3) {  color: #49A16C;}
          li:nth-of-type(3) {
  color: #49A16C;
}

2-й, 4-й, 6-й пункты с классом .list__item имеют синий цвет, т. е. каждый чётный:

        
          
          .list__item:nth-of-type(2n) {  color: #1A5AD7;}
          .list__item:nth-of-type(2n) {
  color: #1A5AD7;
}

Нечётные элементы записываются как :nth-of-type(2n+1).

5-й <li> (или 3-й .list__item) — жёлтый:

        
          
          li:nth-of-type(5),.list__item:nth-of-type(3) {  color: #FFD829;}
          li:nth-of-type(5),
.list__item:nth-of-type(3) {
  color: #FFD829;
}

Последний пункт должен быть белым (укажем это и для тега, и для класса):

        
          
          li:nth-last-of-type(1),.list__item:last-of-type {  color: #18191C;}
          li:nth-last-of-type(1),
.list__item:last-of-type {
  color: #18191C;
}

Открыть демо в новой вкладке

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

Открыть демо в новой вкладке

Как пишется

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

Для порядковых псевдоклассов (:nth-of-type(n-число) и :nth-last-of-type(n-число)) для обозначения кратности (каждый n-й элемент) используется запись в формате целое число плюс буква n, например:

        
          
          p:nth-of-type(4n) {  /* Стили */}
          p:nth-of-type(4n) {
  /* Стили */
}

Будет выбран каждый 4-й элемент (если таковой будет в общем родителе на одном уровне вложенности).

Для обозначения чётных или нечётных элементов можно использовать числовое выражение.

Выберет все чётные элементы:

        
          
          p:nth-of-type(2n) {  /* Стили */}
          p:nth-of-type(2n) {
  /* Стили */
}

Выберет все нечётные элементы:

        
          
          p:nth-of-type(2n + 1) {  /* Стили */}
          p:nth-of-type(2n + 1) {
  /* Стили */
}

Также для обозначения чётных или нечётных элементов можно использовать именованную форму:

Выберет все чётные элементы — то же самое, что p:nth-of-type(2n):

        
          
          p:nth-of-type(even) {  /* Стили */}
          p:nth-of-type(even) {
  /* Стили */
}

Выберет все нечётные элементы — то же самое, что p:nth-of-type(2n+1):

        
          
          p:nth-of-type(odd) {  /* Стили */}
          p:nth-of-type(odd) {
  /* Стили */
}

Аргументы

Для числовых псевдоклассов (:nth-of-type(n) и :nth-last-of-type(n)) обязательно наличие n-числа в аргументах.

Подсказки

💡 Выбор первого (:first-of-type) или последнего (:last-of-type) элемента «грамматически» эквивалентен числовому формату — :nth-of-type(1) для первого элемента и :nth-last-of-type(1) для последнего соответственно, но не требует указания числа-аргумента.

💡 Если нужно выбрать такой элемент, который внутри своего родителя только в единственном экземпляре, используйте :only-of-type.

На практике

Realetive

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