:nth-of-type | Псевдокласс CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Суббота, 03.12.2016
Главная » Справочник CSS3 » Псевдоклассы


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


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

Псевдокласс :nth-of-type задает стиль для элементов заданного типа на основе нумерации в дереве элементов.




Псевдокласс :nth-of-type задает стиль для элемента если он является определенным,отсчитывающим с начала дочерним элементом заданного типа своего родителя.Значения устанавливаются в порядке an+b,где a и b это целые числа,а n преобразующая переменная.Возможны отрицательные преобразования,порядок последовательности можно исследовать применяя генератор значений для этого псевдокласса.Псевдокласс применим ко всем элементам,создан в версии CSS3 и проходит валидацию согласно версии CSS3.




Дополнительные значения :nth-of-type


Значение
Описание
oddНечётная последовательность эквивалентна записи 2n+1
evenЧётная последовательность эквивалентна записи 2n
<Число>Любое число,идёт как номер дочернего элемента относительно своего родителя.Отсчёт начинается с 1,и будет первым элементом в создаваемом списке

Псевдокласс работает в браузерах




Пример применения псевдокласса



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Псевдокласс :nth-of-type</title>
<style type="text/css">
<!--
p:nth-of-type(even) {
color:yellow;
}
-->
</style>
</head>
<body>
<p>Этот текст ( не чётный ) не выделен</p>
<p>Этот текст ( чётный ) выделен</p>
<p>Этот текст ( не чётный ) не выделен</p>
<p>Этот текст ( чётный ) выделен</p>
<p>Этот текст ( не чётный ) не выделен</p>
<p>Этот текст ( чётный ) выделен</p>
<p>Этот текст ( не чётный ) не выделен</p>
<p>Этот текст ( чётный ) выделен</p>
</body>
</html>

Пример в действии




Поэкспериментируйте с генератором значений




Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo
Категория: Псевдоклассы | Добавил: IZOTOP (01.06.2012) | Автор: Меренков Михаил E W
Просмотров: 760 | Теги: css, свойство, :nth-of-type, пример, style | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]