Справочник по 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)

Ссылки на источники

https://developer.mozilla.org/en/CSS/%3anth-child

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="http://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования