Page 175 - Сила CSS3 Освой новейший стандарт

Выбор определенных элементов без идентификаторов и классов • 175

Псевдокласс Описание

:only-of-type Выбирает единственный элемент указанного типа среди детей
родительского элемента

:empty Выбирает элементы, не имеющие дочерних элементов
и не содержащие текст

За исключением псевдокласса :first-child, который входит в спецификацию
CSS 2.1, все эти структурные псевдоклассы впервые появились в версии CSS3. Они
предлагают множество новых способов очень точного выбора нужных элементов.

оБратно к оБлачкам С текСтом: чередующиеСя Цвета
Псевдокласс :nth-child() позволяет изменить фоновый цвет каждого второго об-
лачка с комментарием на нашей странице из главы 2. Мы сделаем это без помощи
классов и JavaScript.
Как работает :nth-child()
Один из самых мощных и полезных структурных псевдоклассов — это :nth_child().
Я уже упоминала выше, что он выбирает элемент, основываясь на его позиции
в списке детей; другими словами, на основе того, сколько братьев ему предшествует.

Порядковый номер нужного элемента записывается в скобках, например li:nth-
child(5). Данный селектор выбирает пятый элемент li в списке. Помимо чисел,
внутри скобок (в качестве аргумента селектора) можно использовать ключевые
слова odd и even для выбора элементов через один, например even выбирает
второй, четвертый, шестой элемент и т. п. Однако настоящая мощь псевдокласса
:nth-child() раскрывается, когда внутрь скобок помещается формула. Эта воз-
можность позволяет создавать очень сложные чередующиеся шаблоны и даже вы-
бирать определенные блоки в последовательностях дочерних элементов. Синтаксис
формулы — an+b; где a — это произвольный размер цикла, n — счетчик, значения
которого начинаются с нуля, а b — также произвольное смещение. Псевдокласс
с формулой может выглядеть так:
li:nth-child(3n+1)

Поскольку значения n начинаются с нуля и в каждом цикле счетчик увеличивается
на единицу, этот селектор выберет следующие элементы:
(3×0)+1=1 — 1-й элемент списка
(3×1)+1=4 — 4-й элемент списка
(3×2)+1=7 — 7-й элемент списка
(3×3)+1=10 — 10-й элемент списка
и так далее!

www.trk.kg