От автора: в CSS есть селекторы для поиска элементов на основе их положения в дереве документа. Их называют индексными псевдоклассами, потому что они смотрят на положение элемента, а не на его тип, атрибуты или ID. Всего их пять.
first-child
last-child
only-child
nth-child()
nth-last-child()
:first-child и :last-child
По названию вы могли догадаться, что псевдоклассы :first-child и :last-child выбирают первый и последний дочерний элемент в узле (элементе). Как и с другими псевдоклассами, :first-child и :last-child оказывают минимальное стороннее воздействие при использовании простых селекторов.
Рассмотрим HTML и CSS ниже:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <title>:first-child and :last-child</title> <style type="text/css"> body { font: 16px / 1.5 sans-serif; } :first-child { color: #e91e63; } :last-child { color: #4caf50; } </style> </head> <body> <h2>List of fruits</h2> <ul> <li>Apples</li> <li>Bananas</li> <li>Blueberries</li> <li>Oranges</li> <li>Strawberries</li> </ul> </body> </html> |
На скриншоте ниже показан результат.
Заголовок h2 и первый li окрасились в розовый, так как :first-child не привязан к конкретным элементам. Тег h2 – первый ребенок тега body, а li – первый дочерний элемент ul. Но почему оставшиеся элементы li зеленые? Потому что :last-child тоже не привязан к конкретному элементу, а ul является последним дочерним элементом в теге body. По сути, в стилях выше мы прописали *:first-child и *:last-child.
Если добавить к :first-child и :last-child простой селектор, они станут конкретнее. Давайте ограничим нашу выборку только элементами списка. Замените :first-child на li:first-child и :last-child на li:last-child. На скриншоте ниже показан результат.
:nth-child() и :nth-last-child()
Уметь выбирать первый и последний дочерние элементы в документе неплохо. А что если нужно выбрать четные или нечетные элементы? Может, нам нужно выбрать шестой элемент в дереве или применить стили к каждому третьему дочернему элементу. Здесь нам помогут псевдоклассы :nth-child() и :nth-last-child().
Как и :not, :nth-child() и :nth-last-child() также являются функциональными псевдоклассами. Они принимают один аргумент, который должен быть:
ключевым словом odd;
ключевым словом even;
целочисленным значением типа 2 или 8;
аргументом в форме Аn+B [5], где А – шаг, B – смещение, а n – переменная с положительным целочисленным числом.
Последний аргумент немного сложнее остальных. Разберем его чуть позже.
Чем отличаются :nth-child() и :nth-last-child()? Они отличаются точкой отсчета: :nth-child() считает вперед, а :nth-last-child() – назад. CSS индексы используют натуральные числа и начинаются с 1, а не с 0.
С помощью псевдоклассов :nth-child() и :nth-last-child() удобно создавать чередующиеся узоры. Полосатая таблица – идеальный пример использования. CSS ниже присваивает четным строкам в таблице светлый синевато-серый фон, результат можно посмотреть на скриншоте ниже:
|
1 2 3 |
tr:nth-child(even) { background: rgba(96, 125, 139, 0.1); } |
Если переключиться с :nth-child на :nth-last-child, полосы инвертируются, так как отсчет начнется с низа. Смотрите скриншот ниже.
А хотите что-нибудь посложнее, с более сложными аргументами? Давайте создадим документ с 20 элементами, как показано ниже.
С помощью :nth-child() и :nth-last-child() можно выбрать один определенный элемент. Можно выбрать все дочерние элементы после заданной позиции, или можно выбрать элементы с кратностью со смещением. Давайте изменим фон шестого элемента:
|
1 2 3 |
.item:nth-child(6) { background: #e91e63; } |
Результат.
А если нужно выбрать каждый третий элемент? Тут нам поможет синтаксис Аn+В:
|
1 2 3 |
.item:nth-child(3n) { background: #e91e63; } |
Еще раз, А – шаг. Это множитель для n, начинающийся с 1. То есть если А = 3, то 3n выберет третий, шестой и девятый элементы и т.д. Именно это можно наблюдать на скриншоте ниже.
Здесь уже все немного интереснее. С помощью :nth-child() и :nth-last-child() можно выбрать все элементы после заданной точки. Давайте выберем все элементы кроме первых семи:
|
1 2 3 |
.item:nth-child(n+8) { background: #e91e63; } |
Здесь шаг не задан. Как результат, n+8 выбирает все элементы n, начиная с восьмого. Смотрите скриншот ниже.
Замечание: отрицательное смещение
Отрицательные значения и диапазоны также валидны. Запись типа :nth-child(-n+8) инвертирует выборку и выбирает первые восемь элементов.
С помощью смещения и шага можно выбрать каждый третий элемент, начиная с пятого:
|
1 2 3 |
.item:nth-child(3n+5) { background: #e91e63; } |
Результат.
only-child
Псевдокласс only-child выбирает элемент только в том случае, если он единственный дочерний элемент. Ниже представлено два маркированных списка. В первом один элемент, во втором три:
|
1 2 3 4 5 6 7 8 9 |
<ul> <li>Apple</li> </ul> <ul> <li>Orange</li> <li>Banana</li> <li>Raspberry</li> </ul> |
Селектор li:only-child{color: #9c27b0;} выберет <li>Apple</li>, так как это единственный дочерний элемент первого списка. Элементы второго списка в выборку не попадают, так как там три смежных элемента. Результат показан ниже.
:empty
С помощью псевдокласса :empty можно выбрать элементы, у которых нет дочерних элементов. Псевдокласс :empty говорит сам за себя (empty от англ. «пустой»). Чтобы попасть в выборку :empty, элемент должен быть абсолютно пустым, не должно быть даже пробелов. То есть <p></p> попадает в выборку, а <p> </p> нет.
Иногда WYSIWYG редакторы вставляют пустые теги p в ваш контент. С помощью :empty и :not можно делать так, чтобы к этим элементам не применялись стили. Например, p:not(:empty).
Выбор элементов определенного типа по их индексу
Описанные в предыдущем разделе псевдоклассы выбирают элементы, если те занимают определенную позицию в дереве документа. Например, p:nth-last-child(2) выберет все теги p перед последним внутри родительского блока.
В этом разделе мы поговорим о типизированных индексных псевдоклассах. Эти псевдоклассы также выбирают элементы по значению индекса, но выбор ограничен определенным типом. Например, нужно выбрать пятый тег p или четные h2.
Существует пять таких псевдоклассов, имена которых полностью противоположны их нетипизированным коллегам:
first-of-type
last-of-type
only-of-type
nth-of-type()
nth-last-of-type()
Грань между ними и дочерними индексными псевдоклассами тонка. Запись p:nth-child(5) находит только пятый тег p, а запись p:nth-of-type(5) находит все теги p и вычленяет среди них пятый.
Давайте создадим другой документ. В нем также 20 элементов, только некоторые — это теги p, а другие – div. Теги p со скругленными углами, смотрите скриншот ниже.
Использование first-of-type, last-of-type и only-type
С помощью :first-of-type можно выбрать первый элемент, подпадающий под селектор. Давайте изменим цвет первого p на зеленый:
|
1 2 3 |
p:first-of-type { background: #cddc39; } |
Такая запись выберет все теги p, являющиеся первым дочерним элементом в родительском блоке. Смотрите скриншот ниже.
Псевдокласс :last-of-type работает схожим образом. Выбирается последний элемент в родительском блоке. Посмотреть результат можно ниже. А only-of-type выберет элемент только, если он является единственным дочерним элементом такого типа внутри родительского блока. Показано ниже.
Разберем еще один пример использования :first-of-type, на этот раз с псевдоэлементом. Помните псевдоэлемент ::first-letter, о котором мы рассказывали ранее в этой главе? Как вы помните, с его помощью создавалась первая заглавная буква для всех элементов, к которым он применялся. А что если мы ограничим его действие только на первый параграф:
|
1 2 3 4 |
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 и все последующие, можно взять ключевое слово odd и :nth-of-type():
|
1 2 3 4 |
p:nth-of-type(odd) { background: #cddc39; color: #121212; } |
На скриншоте ниже видно, что выбраны только нечетные теги p, а не просто нечетные элементы.
Точно так же :nth-last-of-type(even) выберет четные теги p, но отсчет начнется с последнего p в документе. В нашем примере отсчет начнется с элемента 18 (см. ниже).
Если до сих пор что-то осталось непонятно, поиграйтесь с инструментом Paul Maloney Nth-Test tool или посмотрите примеры на Nth Master. Оба проекта идеально подходят для изучения псевдоклассов.
Автор: Tiffany Brown
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
