В CSS существует селектор, если быть более точным, псевдо-селектор, называемый nth-child. Пример его использования:
Ul li:nth-child(3n+3) {
color: #ccc;
}
Вышеприведённый CSS делает следующее: применяет стиля для каждого третьего элемента ненумерованного списка. А именно 3-го, 6-го, 9-го, 12-го и т.д. Но как это работает? А также какую выгоду можно извлечь используя nth-child ?
Основной смысл заключается в выражении в скобках. nth-child принимает два ключевых слова: even
(чётный) и odd
(нечётный). Смысл их абсолютно ясен. Even выбирает чётные элементы (2, 4, 6), odd - нечётные (1, 3, 5).
Как показано в примере выше, nth-child может обрабатывать выражения. Какое самое простое возможное выражение? Просто число. Если вы напишите какое-нибудь число в скобках, то будет выбран один единственный элемент. Например, выберем пятый элемент списка:
Ul li:nth-child(5) {
color: #ccc;
}
Вернёмся к нашему первому примеру, в котором мы использовали выражение (3n+3). Как он работает? Почему он выбирает каждый третий элемент? Вся суть в переменной n. Она принимает целые значения от нуля и больше. Давайте рассмотрим подробнее:
(3 x 0) + 3 = 3 = 3-ий элемент
(3 x 1) + 3 = 6 = 6-ой элемент
(3 x 2) + 3 = 9 = 9-ый элемент
и т.д.
Теперь попробуем следующее выражение: nth-child(2n+1) :
(2 x 0) + 1 = 1 = 1-ый элемент
(2 x 1) + 1 = 3 = 3-ий элемент
(2 x 2) + 1 = 5 = 5-ый элемент
и т.д.
В итоге получили тоже самое что и в случае с odd , таким образом нет нужды часто использовать такое выражение. Более того, наш первый пример тоже можно упростить и использовать вместо оригинального выражения (3n+3), выражение (3n):
(3 x 0) + 0 = 0 = нет соответствия
(3 x 1) + 0 = 3 = 3-ий элемент
(3 x 2) + 0 = 6 = 6-ой элемент
и т.д.
Как видите, результат тот же, но не надо писать "+3". Также мы можем использовать отрицательные значения в выражении. Например, 4n-1:
(4 x 0) - 1 = -1 = нет соответствия
(4 x 1) - 1 = 3 = 3-ий элемент
(4 x 2) - 1 = 7 = 7-ой элемент
и т.д.
Использование отрицательных значений для коэффициента при n, выглядит слегка странно, потому что в случае отрицательного результата не будет найдено соответствие. Вам надо будет постоянно изменять выражение, чтобы добавить положительных элементов. Как оказалось, этот подход очень удобен для выбора первых n элементов. Рассмотрим пример с "-n+3":
0 + 3 = 3 = 3ий элемент
-1 + 3 = 2 = 2-ой элемент
-2 + 3 = 1 = 1-ый элемент
-3 + 3 = 0 = нет соответствия
Кроссбраузерность
nth-child является одним из тех самых несчастных атрибутов, которые являются полностью кроссбраузерными, за исключением абсолютного нуля в IE, даже 8-ой версии. Поэтому, когда речь заходит о его использовании, то если ожидаемый результат - это в некотором роде визуальный эффект (например раскраска строк некой таблицы), то это идеальный подход. Но, вероятно, не стоит использовать его для чего-то более важного, что может повлиять, например, на корректность вёрстки.
Конечно, если вы используете jQuery, то вам не стоит переживать по этому поводу, так как jQuery работает даже в Internet Explorer.
Ну и напоследок
Вы можете поиграть с различными выражениями для селектора на
Существует такой селектор, точнее псевдокласс, называемый:nth-child . Вот пример его использования:
UL LI:nth-child(3n+3) {
color:#CCC;
}
Что делает CSS-код, приведенный выше? Он выбирает каждый третий элемент внутри маркированного списка: это 3-й, 6-й, 9-й, 12-й и т.д. Давайте посмотрим, как именно работает это выражение и что еще можно сделать с помощью:nth-child .
Всё зависит от того, что находится между скобками. Селектор:nth-child принимает два ключевых слова: even и odd . Тут всё просто: even выбирает чётные элементы, такие как 2-ой, 4-ый, 6-ой и т.д., а odd выбирает нечётные элементы, такие как 1-й, 3-й, 5-й и т.д.
Как видно из первого примера, :nth-child также принимает в качестве параметра выражения. В том числе и простейшие уравнения, иначе говоря, просто числа. Если поставить их в скобки, будет выбран только один элемент с соответствующим номером. Например, вот как выбрать только пятый элемент:
UL LI:nth-child(5) {
color:#CCC;
}
Однако давайте вернемся к 3n+3 из первого примера. Как он работает и почему выбирается каждый третий элемент? Весь фокус в понимании переменной n и приведенного алгебраического уравнения. Подумайте об n , как о начинающемся с нуля множестве целых чисел. Потом дополните уравнение. Так 3n это 3×n , а все уравнение вместе это (3×n)+3 . Теперь, подставляя вместо n числа больше или равные нулю, мы получим:
- (3 × 0) + 3 = 3 = 3-й элемент
- (3 × 1) + 3 = 6 = 6-й элемент
- (3 × 2) + 3 = 9 = 9-й элемент и т.д.
А как насчёт:nth-child(2n+1) ?
- (2 × 0) + 1 = 1 = 1-й элемент
- (2 × 1) + 1 = 3 = 3-й элемент
- (2 × 2) + 1 = 5 = 5-й элемент и т.д.
Так, стоп! Это ведь то же самое, что и odd . Тогда, возможно, не стоит использовать это выражение? Но разве в этом случае мы не подвергаем наш первый пример излишнему усложнению? Что, если вместо 3n+3 мы запишем 3n+0 или ещё проще 3n ?
- (3 × 0) = 0 = ничего нет
- (3 × 1) = 3 = 3-й элемент
- (3 × 2) = 6 = 6-й элемент
- (3 × 3) = 9 = 9-й элемент и т.д.
Итак, как вы можете видеть, результат получится такой же, а значит, нет необходимости в +3 . Мы можем использовать и отрицательные значения n , с таким же успехом, как и вычитание в уравнениях. Например, 4n-1:
- (4 × 0) – 1 = –1 = ничего нет
- (4 × 1) – 1 = 3 = 3-й элемент
- (4 × 2) – 1 = 7 = 7-й элемент и т.д.
Использование -n может показаться странным - ведь если конечный результат отрицательный, то никакие элементы в выборку не попадут. Но если дополнить уравнение и снова сделать результат положительным, то выборка окажется довольно интересной: при помощи неё можно будет получить первые n элементов, например так: -n+3:
- –0 + 3 = 3 = 3-й элемент
- –1 + 3 = 2 = 2-й элемент
- –2 + 3 = 1 = 1-й элемент
- –3 + 3 = 0 = ничего нет и т.д.
На SitePoint есть хороший справочник с милой табличкой , которую я бесстыдно опубликую здесь:
n
|
2n+1
|
4n+1
|
4n+4
|
4n
|
5n-2
|
-n+3
|
---|
0
|
1
|
1
|
4
|
–
|
–
|
3
|
1
|
3
|
5
|
8
|
4
|
3
|
2
|
2
|
5
|
9
|
12
|
8
|
8
|
1
|
3
|
7
|
13
|
16
|
12
|
13
|
–
|
4
|
9
|
17
|
20
|
16
|
18
|
–
|
5
|
11
|
21
|
24
|
20
|
23
|
–
|
Поддержка браузерами
Селектор:nth-child - один из немногих CSS-селекторов, который почти полностью поддерживается в современных браузерах и абсолютно не поддерживается в IE, даже в IE8. Поэтому когда дело доходит до его использования, и конечный результат сделан по технологии прогрессивного улучшения - вы можете смело использовать его для некоторых оформительских элементов, вроде расцветки строк таблицы. Однако не стоит применять его в более серьезных случаях. Например, полагаться на него в раскладке сайта или удалять правое поле из каждого третьего блока в сетке три на три, чтобы они вошли в ряд.
Вы дошли до третьей части этой главы. Здесь вы узнаете, как использовать селекторы дочерних элементов в CSS, а также познакомитесь с некоторыми дополнительными псевдоклассами для более точной выборки.
Дочерние селекторы CSS
В предыдущей статье мы рассказывали о родственных связях между элементами HTML-документа, в том числе и о дочерних элементах. Давайте посмотрим на примере, как эти связи можно использовать в CSS.
Представьте, что вам нужно присвоить стиль только тем тегам
Которые являются дочерними по отношению к
, не затрагивая остальные
(например,
Дочерние по отношению к
).
Как это сделать? Очень просто: создадим дочерний селектор:
Body > p {
color: #333;
}
Обратите внимание на символ > после body . С помощью него вы указываете, что стиль применяется исключительно для дочерних тегов
Родителя
. Если символ убрать, то стиль применится абсолютно ко всем тегам
Которые находятся внутри тега
, хотя они могут и не являться для него дочерними.
Дополнительные псевдоклассы
В CSS3 существует ряд псевдоклассов для работы с дочерними элементами. Ниже приведено описание каждого из них, примеры использования, а также отличия между псевдоклассами вида «child» и «of-type».
- :first-child – с помощью этого псевдокласса можно применить стиль к указанному элементу веб-страницы, при условии, что он является первым
- :last-child – стиль применяется к указанному элементу веб-страницы при условии, что он является последним
дочерним элементом своего родителя;
- :nth-child – позволяет выбрать четные (even) и нечетные (odd) дочерние элементы; также с помощью данного псевдокласса можно стилизовать чередующиеся дочерние элементы, используя выражения вида an+b и числа;
- :only-child – применяется к дочернему элементу при условии, что тот является единственным
ребенком у родителя;
- :first-of-type – стиль применяется к первому элементу указанного типа
(даже если этот элемент не является первым дочерним для своего родителя и над ним находятся другие дочерние элементы других типов);
- :last-of-type – работает точно так же, как и предыдущий псевдокласс, с той лишь разницей, что стиль применяется к последнему элементу указанного типа
;
- :nth-of-type – по принципу работы похож на:nth-child , но ориентируется на тип
элемента;
- :only-of-type – применяется к дочернему элементу указанного типа при условии, что тот является у родителя единственным ребенком своего типа
.
Пример использования:first-child, :last-child и:nth-child
Первый ребенок
Второй ребенок
Третий ребенок
Нечетный номер |
Четный номер |
Нечетный номер |
Четный номер |
Последний ребенок
/* CSS */
p:first-child {
font-weight: bold;
text-transform: uppercase;
}
p:last-child {
font-style: italic;
font-size: 0.8em;
}
p:nth-child(3) {
color: red;
}
tr:nth-child(odd) {
background-color: #A2DED0;
}
tr:nth-child(even) {
background-color: #C8F7C5;
}
Скриншот: применение:first-child, :last-child и:nth-child
Мы написали CSS стиль для дочерних элементов простого HTML-документа, где тег
является родителем для тегов
,
. Разберем CSS по порядку.
Первое правило – p:first-child – касается элемента p: если он является первым дочерним элементом своего родителя
, то к нему применяется стиль (в нашем случае это жирный шрифт и преобразование текста в верхний регистр). Если в данный HTML-код сразу после открывающего тега
добавить еще какой-нибудь тег (к примеру,
), то стиль p:first-child уже не будет отображаться, поскольку
Перестанет быть первым дочерним тегом. В данном случае первым дочерним элементом будет h2 .
Всё то же самое происходит и с правилом p:last-child – стиль CSS будет применен к тегу
Лишь тогда, когда он будет являться последним дочерним элементом своего родителя
. Добавьте после
Любой другой тег отличного типа и вы увидите, что правило p:last-child перестанет применяться.
Правило p:nth-child(3) работает для третьего
дочернего тега
(об этом свидетельствует число 3 в скобках). Цвет шрифта для этого абзаца становится красным. Вы можете изменить число 3 (например, на 2) и посмотреть результат.
Правила tr:nth-child(odd) и tr:nth-child(even) работают для нечётных и чётных элементов tr соответственно. Вы можете увидеть результат на скриншоте, а также скопировать весь код и поэкспериментировать со стилями самостоятельно.
Пример использования:first-of-type, :last-of-type, :nth-of-type и:only-of-type
Первый ребенок
Второй ребенок
Третий ребенок
Четвертый ребенок
Пятый ребенок
Последний ребенок
/* CSS */
p:first-of-type {
color: violet;
text-transform: uppercase;
}
p:last-of-type {
font-style: italic;
font-size: 0.8em;
}
p:nth-of-type(3) {
color: red;
}
p:nth-of-type(odd) {
background-color: #A2DED0;
}
p:nth-of-type(even) {
background-color: #C8F7C5;
}
h3:only-of-type {
text-decoration: underline;
}
Скриншот: применение:first-of-type, :last-of-type, :nth-of-type и:only-of-type
Первое правило CSS, которое вы видите – это p:first-of-type . Что оно делает? Оно выбирает дочерний элемент типа p , который первым
встречается у родителя. И не важно, на каком месте среди элементов других типов находится данный тег – на первом, втором или десятом. В этом и заключается отличие между псевдоклассами:first-child и:first-of-type .
Второе правило – p:last-of-type – применяет стиль к последнему
дочернему элементу типа p . Как видно из HTML-кода, после последнего тега
Есть еще и тег
, присутствие которого никак не влияет на выполнение CSS-правила (в отличие от варианта с:last-of-child).
Следующее правило – p:nth-of-type(3) – изменяет цвет шрифта на красный. Применяется этот стиль к тегу
Который является третьим
по счету элементом своего типа у родителя. На скриншоте вы видите, что красный цвет применяется к тегу
Который по факту является пятым ребенком тега
. Но если не брать во внимание элементы других типов, то получается, что тег
С красным шрифтом находится на третьем месте (среди тегов своего типа). Таким образом работает данное правило.
Правила p:nth-of-type(even) и p:nth-of-type(odd) работают аналогично: поскольку перед двоеточием указано имя p , то выбираются четные и нечетные дочерние элементы типа p и окрашиваются в заданные цвета. Остальные элементы пропускаются.
Последнее правило – h3:only-of-type – применяется к содержимому тега
, делая текст подчеркнутым. Данный стиль работает лишь потому, что тег является единственным
дочерним элементом своего типа. Если в HTML-код добавить еще один тег , стиль не будет применён.
Выводы
Дочерний селектор CSS позволяет изменить стиль дочернего элемента HTML-документа, исходя из того, кто является его родителем.
С помощью дополнительных псевдоклассов:first-child, :last-child, :nth-child, :only-child можно стилизовать дочерние элементы HTML-документа, ориентируясь на их местоположение, нумерацию в дереве элементов.
Псевдоклассы:first-of-type, :last-of-type, :nth-of-type, :only-of-type позволяют применять стиль к дочерним элементам HTML-документа, ориентируясь на их тип, а также на нумерацию в дереве элементов.
Псевдокласс :nth-child
используется для добавления стиля к элементам на основе нумерации в дереве элементов.
Обозначения
| Описание
| Пример
|
---|
<тип>
| Указывает тип значения.
| <размер>
|
A && B
| Значения должны выводиться в указанном порядке.
| <размер> && <цвет>
|
A | B
| Указывает, что надо выбрать только одно значение из предложенных (A или B).
| normal | small-caps
|
A || B
| Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
| width || count
|
| Группирует значения.
| [ crop || cross ]
|
*
| Повторять ноль или больше раз.
| [,<время>]*
|
+
| Повторять один или больше раз.
| <число>+
|
?
| Указанный тип, слово или группа не является обязательным.
| inset?
|
{A, B}
| Повторять не менее A, но не более B раз.
| <радиус>{1,4}
|
#
| Повторять один или больше раз через запятую.
| <время>#
|
×
Значения
odd Все нечётные номера элементов. even Все чётные номера элементов. <число> Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке. <выражение> Задаётся в виде an±b
, где a
и b
- целые числа, а n
- счётчик, который автоматически принимает значение 0, 1, 2...
Если a
равно нулю, то оно не пишется и запись сокращается до b
. Если b
равно нулю, то оно также не указывается и выражение записывается в форме an
. a
и b
могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счёт использования отрицательных значений a
и b
некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.
Табл. 1. Результат для различных значений псевдокласса Значение
| Номера элементов
| Описание
|
---|
1
| 1
| Первый элемент, является синонимом псевдокласса :first-child .
|
5
| 5
| Пятый элемент.
|
2n
| 2, 4, 6, 8, 10,…
| Все чётные элементы, аналог значения even
.
|
2n+1
| 1, 3, 5, 7, 9,…
| Все нечётные элементы, аналог значения odd
.
|
3n
| 3, 6, 9, 12, 15,…
| Каждый третий элемент.
|
3n+2
| 2, 5, 8, 11, 14,…
| Каждый третий элемент, начиная со второго.
|
n+4
| 4, 5, 6, 7, 8,…
| Все элементы, кроме первых трёх.
|
-n+3
| 3, 2, 1
| Первые три элемента.
|
5n-2
| 3, 8, 13, 18, 23,…
| —
|
even
| 2, 4, 6, 8, 10,…
| Все чётные элементы.
|
odd
| 1, 3, 5, 7, 9,…
| Все нечётные элементы.
|
Допустимо комбинировать два псевдокласса :nth-child
для выбора диапазона элементов. Здесь будут выбраны все элементы со второго по пятый.
:nth-child(n+2):nth-child(-n+5) { … }
Пример
nth-child
| 2134 | 2135 |
2136 | 2137 | 2138 |
Нефть | 16 | 34 |
62 | 74 | 57 |
Золото | 4 | 69 |
72 | 56 | 47 |
Дерево | 7 | 73 |
79 | 34 | 86 |
Камни | 23 | 34 |
88 | 53 | 103 |
В данном примере псевдокласс :nth-child
используется для изменения стиля первой строки таблицы, а также для выделения цветом всех чётных строк (рис. 1).
Рис. 1. Применение псевдокласса:nth-child к строкам таблицы
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация
) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация
) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация
) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект
) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик
) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации
) - первая черновая версия стандарта.
×
Псевдокласс first-child в CSS используется для выбора первого элемента в контейнере. При этом конкретный тип элемента не учитывается, значение имеет лишь его позиция относительно родителя. Существуют некоторые тонкости в работе этого селектора, которые необходимо понимать для правильного использования.
CSS-псевдоклассы
Наряду с идентификаторами, классами, тегами и атрибутами псевдоклассы являются одним из видов CSS-селекторов. Их особенность в том, что они не могут быть установлены непосредственно в HTML.
Примерами псевдоклассов являются "первая строка в контейнере", "первая буква в слове", "первый дочерний элемент у родителя". Браузер может обнаружить подобные элементы только после того, как он проанализировал страницу и составил DOM-дерево, а в ряде случаев только после отрисовки.
Наличие в CSS подобного механизма позволяет определять оформление, не привязанное к HTML-коду, что открывает большие возможности для дизайна.
Выбор первого элемента
Псевдокласс first-child в CSS отвечает за выбор самого первого элемента в родительском контейнере. Текстовые узлы при этом игнорируются, в счет идут только полноценные теги.
Найдем первые элементы в двух простых HTML-структурах.
- Первый пункт
- Второй пункт
- Третий пункт
Есть только два способа прожить жизнь. Первый - будто чудес не существует. Второй - будто кругом одни чудеса. Альберт Эйнштейн
В результате выбраны будут первый пункт списка и тег, определяющий жирное начертание шрифта.
Первый пункт
два способа
Синтаксис
Все псевдоклассы в CSS определяются по определенному шаблону. Сначала указывается основной селектор, затем искомый псевдокласс, отделенный двоеточием.
B:first-child {
text-decoration: underline;
}
Такое правило подчеркнет текст первого элемента b внутри каждого контейнера.
-
Все хотят изменить мир сам.
Лев Толстой
-
Тот, кто умеет, тот делает, кто не умеет - тот учит других.
Бернард Шоу
На скриншоте очевидно, что выделились только элементы, соответствующие одновременно селектору тега b и селектору псевдокласса:first-child. Стиль был применен внутри каждого контейнера, в данном случае внутри всех пунктов списка.
Помимо тега, в качестве основного можно использовать любой другой селектор CSS, например:
Class:first-child {}
:first-child {}
*:first-child {}
Типичные ошибки
Псевдокласс первого элемента first-child в CSS выбирает строго тег, находящийся на первом месте в родительском контейнере. Даже если элемент полностью соответствует селектору, но не является первым потомком, он не будет выбран.
Для примера возьмем предыдущий список цитат и перенесем авторов в начало.
-
Лев Толстой
Все хотят изменить мир, но никто не хочет измениться сам.
-
Бернард Шоу
Тот, кто умеет, тот делает, кто не умеет - тот учит других.
Несмотря на то что селектор элемента остался прежним, CSS-стиль не применился, так как первым элементом в контейнере теперь является i.
Еще одной ошибкой является игнорирование Это такой же HTML-элемент, как и прочие. Если он окажется в контейнере перед искомым блоком, то селектор CSS first-child не сработает.
Учет типа элемента
Чтобы избежать подобных ситуаций, можно использовать псевдокласс first-of-type. Он работает так же, как селектор CSS first-child, но учитывает тип элемента.
B:first-of-type {
text-decoration: underline;
}
Теперь при подсчете учитываются только элементы, соответствующие селектору b.
Выбор последнего элемента
Существует также псевдокласс last-child, который работает аналогично селектору CSS first-child, но начинает счет элементов с конца контейнера.
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: