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

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

Такие фрагменты не входят в дерево документов, и единственный способ обратиться
к ним — через селекторы псевдоэлементов.
В терминах синтаксиса, в CSS3 названия псевдоклассов начинаются с одного двоеточия,
а названия псевдоэлементов — с двух (раньше и для первых, и для вторых использовалось
одно двоеточие, и такой синтаксис до сих пор работает). В одном селекторе может быть
только один псевдоэлемент, и он должен находиться в конце (например, #article p::first-
line); на псевдоклассы подобные ограничения не распространяются.

новые Структурные пСевдоклаССы
В CSS3 впервые появилась концепция «структурных псевдоклассов», позволяющих
обращаться к элементам в дереве документа по их уникальным характеристикам,
таким как относительное местоположение. Например, псевдокласс :first-child
выбирает элемент, являющийся первым дочерним элементом своего родительского
элемента. В дереве документа дочерний элемент представляет собой отдельный
элемент HTML, а уникальным его делает то, что он первый. Нам нужна возмож-
ность выбирать элемент именно по этой уникальной характеристике, не добавляя
класс или идентификатор.

Все эти структурные псевдоклассы базируются на дереве документа, также назы-
ваемом объектной моделью документа (document object model, DOM); я предлагаю
освежить знания и вспомнить, что это такое. Дерево документа — это иерархиче-
ская структура страницы HTML, составленная из элементов, атрибутов и текста;
каждый из перечисленных объектов по отдельности зовется узлом. Дерево состоит
из множества уровней, потому что элементы вкладываются один в другой (рис. 5.1).

html

body

div div

h1 p p img ul

em li li li

Рис. 5.1. Пример дерева документа, в котором присутствует предок,
потомок, родитель, ребенок и элементы-братья

Элемент, вложенный в другой элемент, называется ребенком, или дочерним элемен-
том внешнего элемента; вместе с элементами более глубоких уровней вложенности

www.trk.kg