Справочник по CSS : Тематический указатель : Селекторы : Псевдоклассы : :nth-child

Материал из Справочник Web-языков

Версия от 14:01, 26 апреля 2011; Evgen (Обсуждение | вклад)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Разработка и внедрение CRM-систем

Разработка и внедрение CRM-систем "под ключ" на базе SugarCRM. Любые задачи для любого вида бизнеса. Установка бесплатной CRM-системы бесплатно. Интеграция с существующей инфраструктурой, бухгалтерской программой, телефонией. Доработка существующих проектов. Обучение персонала.

подробнее ...

+7 (495) 646-06-27
8 (800) 555-06-28 (звонок бесплатный)
+7 (910) 9082123 (сотовый, МТС)
evgenjekson (бесплатная переадресация на сотовый)
195938768
[email protected]

Содержание

Псевдокласс :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="https://www.spravkaweb.ru/">Справочник Web-языков</A>)
наши проекты
смотрим также
    Rambler\'s Top100 Индекс цитирования
    смотрим также