Псевдоклассы CSS: стилизация элементов на основе их индекса

 .item:nth-child(3n+5) { background: #e91e63; } 

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

:единственный ребенок

Псевдокласс :only-child сопоставляет элементы, если они являются единственным дочерним элементом другого элемента. Ниже приведены два неупорядоченных списка. Первый содержит один элемент, а второй содержит три:

 <ul> <li>Apple</li> </ul> <ul> <li>Orange</li> <li>Banana</li> <li>Raspberry</li> </ul> , <ul> <li>Apple</li> </ul> <ul> <li>Orange</li> <li>Banana</li> <li>Raspberry</li> </ul> 

Использование li:only-child{color: #9c27b0;} выберет <li>Apple</li> , поскольку это единственный дочерний li:only-child{color: #9c27b0;} нашего первого списка. Однако ни один из элементов во втором списке не соответствует, потому что есть три родных брата. Вы можете увидеть, как это выглядит ниже.

: пустой

Также можно выбрать элементы, у которых нет потомков, используя псевдокласс :empty . Теперь, когда мы говорим :empty , мы имеем в виду пусто . Чтобы элемент соответствовал псевдоклассу :empty , он не может содержать ничего, даже пробела. Другими словами, <p></p> будет соответствовать, но <p> </p> не будет.

Иногда редакторы WYSIWYG («Что видишь, то и получаешь») вставляют пустые элементы p в ваш контент. Вы можете использовать :empty в сочетании с псевдоклассом :not() чтобы избежать применения стилей к этим элементам; например, p:not(:empty) .

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

Псевдоклассы, обсуждаемые в предыдущем разделе, соответствуют элементам, если они занимают заданную позицию в поддереве документа. Например, p:nth-last-child(2) выбирает каждый элемент p который является ближайшим к последнему элементу его родителя.

В этом разделе мы обсудим типизированные дочерние индексированные псевдоклассы . Эти псевдоклассы также сопоставляют элементы в зависимости от значения их индексов; однако совпадения ограничены элементами определенного типа. Например, выбор пятого p элемента или четного h2 элемента.

Существует пять таких псевдоклассов с именами, которые отражают имена их нетипизированных аналогов:

Разница между этими псевдоклассами и индексированными дочерними объектами является тонкой. Если p:nth-child(5) соответствует пятому элементу, только если это элемент p , p:nth-of-type(5) соответствует всем элементам p , а затем находит пятый элемент p среди них.

Давайте начнем с немного другого документа. Он по-прежнему содержит 20 элементов, но некоторые из них являются p элементами, а некоторые — элементами div . Элементы p имеют закругленные углы, как видно ниже.

Использование :first-of-type :last-of-type и :only-type

С помощью :first-of-type мы можем выбрать первый элемент, который соответствует селектору. Как насчет того, чтобы мы дали нашему первому элементу p светло-зеленый фон:

 p:first-of-type { background: #cddc39; } 

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

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

Давайте рассмотрим другой пример использования :first-of-type , но на этот раз с псевдоэлементом. Помните псевдоэлемент ::first-letter ранее в этой главе? Ну, как вы видели, он создал начальный капитал для каждого элемента, к которому он был применен. Как насчет того, чтобы мы пошли еще дальше и ограничили этот начальный капитал первым параграфом:

 p:first-of-type::first-letter { font: bold italic 3em / .5 serif; color: #3f51b5; } 

Как показано на рисунке ниже, теперь у нашего абзаца будет начальный капитал, даже если ему предшествует заголовок.

Использование :nth-of-type и :nth-last-of-type

Функции :nth-of-type() и :nth-last-of-type() также являются функциональными псевдоклассами. Они принимают те же аргументы, что и :nth-child() и :nth-last-child() . Но как :first-of-type и :last-of-type , индексы разрешаются в элементы того же типа. Например, чтобы выбрать первый элемент p и каждый последующий элемент p , мы можем использовать ключевое слово odd с :nth-of-type() :

 p:nth-of-type(odd) { background: #cddc39; color: #121212; } 

Как видно из рисунка ниже, это соответствует только нечетным элементам p , а не нечетным дочерним элементам.

Аналогично, использование :nth-last-of-type(even) выбирает четные p элементы, но отсчет начинается с последнего p элемента в документе — в данном случае, элемента 18 (показан ниже).

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