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

смотрим также

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

Перейти к: навигация, поиск


Содержание

Псевдокласс :nth-of-type

Аналогично :nth-child. Действует лишь на потомков, которые соответствуют элементу в селекторе (имеют тот же тип).

Синтаксис

element:nth-of-type(an + b) { style properties }

Замечания

Значения a и b являются числовыми.

Использование псевдокласса :nth-of-type полезно, если вы хотите, например, выделить элементы одного типа, которые внутри себя могут содержать элементы других типов. Это могут быть абзацы текста, внутри которых могут быть различные рисунки или таблицы; но стиль надо применить именно к определенным абзацам.

Примеры

В примере с помощью псевдокласса :nth-of-type один стиль применяется для нечетных по счету картинок в тексте, а второй для четных.

img:nth-of-type(2n+1) { float: right; }
  
img:nth-of-type(2n) { float: left; }  

Стандарты

Этот псевдоэлемент определен в CSS 3 Selectors

Поддерживаемые браузеры

Firefox (Gecko) начиная с версии 3.5 (1.9.1)

Opera начиная с версии 9.5

Safari (WebKit) начиная с версии 1.1 (100)

Смотрите также

:nth-child

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

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

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