/ ↲
    Расширенный поиск

    CSS

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

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

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

    1. Кратко
    2. Пример
    3. Как пишется
    4. Аргументы
    5. Подсказки
    6. На практике
      1. Realetive советует

    Кратко

    Псевдоклассы -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: #41E847;}
          li:nth-of-type(3) {
  color: #41E847;
}

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

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

    Нечётные элементы записываются как :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: #FFFFFF;}
          li:nth-last-of-type(1),
.list__item:last-of-type {
  color: #FFFFFF;
}
    Открыть демо в новой вкладке

    Если нам нужно выбрать единственный элемент своего родителя, используется псевдокласс :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.

    На практике