Справочник по CSS : Тематический указатель : Селекторы : Псевдоклассы : :nth-child
смотрим также
Материал из Справочник Web-языков
Содержание |
Псевдокласс :nth-child
Используется для добавления стиля к элементам на основе нумерации в дереве элементов.
Синтаксис
element:nth-child(an + b) { style properties }
Замечания
Значения a и b являются числовыми. Стили могут применяться также к четным (odd) и нечетным (even) элементам, например, к столбцам таблицы.
Стиль применяется к одному потомку элемента в дереве документа или сразу к нескольким.
Чтобы лучше понять механизм применения данного псевдокласса, посмотрите примеры, расположенные ниже.
Примеры
В примерах показано как применяется псевдокласс :nth-child для различных элементов.
В первом блоке примеров даются пояснения к каким элементам будут применены CSS-свойства, но конкретные свойства не указываются.
1. Стиль применится ко всем нечетным строкам таблицы
tr:nth-child(2n+1)
2. Стиль также применится ко всем нечетным строкам таблицы
tr:nth-child(odd)
3. Стиль применится ко всем четным строкам таблицы
tr:nth-child(2n)
4. Стиль также применится ко всем четным строкам таблицы
tr:nth-child(even)
5. Стиль применится только к первому потомку родительского элемента (в данном случае использование :nth-child аналогично селектору first-child)
span:nth-child(0n+1)
или
span:nth-child(1)
Во втором блоке примеров даются пояснения к каким элементам будет применен будут применены CSS-свойства, указываются конкретные свойства.
1. Цвет текста в пятом пункте li будет желтым. ul - родительский элемент, li - дочерний (потомок).
ul li:nth-child(5) {color: yellow;}
2. Цвет текста в каждом втором пункте li, начиная с четвертого, будет красным. ul - родительский элемент, li - дочерний (потомок).
ul li:nth-child(2n+4) {color: red;}
3. Цвет текста в каждом четном абзаце будет зеленым.
p:nth-child(2n+1) {background-color: lime;}
Стандарты
Этот псевдоэлемент определен в CSS 3 Selectors
Поддерживаемые браузеры
Firefox (Gecko) начиная с версии 3.5 (1.9.1)
Opera начиная с версии 9.5
Safari (WebKit) начиная с версии 1.1 (100)