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

172 • Глава 5. Повышение эффективности за счет псевдоклассов

в этОм урОке

Мы создадим чередующиеся стили для облачков с текстом и фотографий в статье,
а также сформируем оглавление со ссылками на разделы статьи. Для этого мы при-
меним следующие возможности CSS3:
псевдокласс :nth-child() для выбора чередующихся элементов;
псевдокласс :nth-of-type() для выбора чередующихся элементов определен-
ного типа;
псевдокласс :last-child для особой стилизации последнего элемента в списке;
псевдокласс :target для стилизации целевого элемента URL-адреса, содержащего
идентификатор фрагмента;
переходы для постепенного изменения значения свойства;
возможности анимации для управления более сложными визуальными изме-
нениями.

выбОр ОПределенных элементОв без исПОльзОвания
идентификатОрОв и классОв

Как и селекторы атрибутов, псевдоклассы и псевдоэлементы можно применять для
выбора определенных элементов в коде HTML без присваивания этим элементам
идентификаторов или классов, что делает код значительно чище. Псевдоклассы и
псевдоэлементы предназначены для работы с объектами HTML, которые либо не
существуют в виде автономных элементов, либо существуют, но обладают уни-
кальными характеристиками, и к этим характеристикам невозможно обратиться с
помощью простых селекторов. Например, с помощью псевдоэлемента :first-line
можно отформатировать первую строку абзаца, даже если она не выделена особыми
тегами HTML. В этом смысле некоторые псевдоклассы и псевдоэлементы обладают
большей мощью, чем селекторы атрибутов, так как позволяют выбирать элементы,
к которым в принципе невозможно добавить идентификатор или класс.

Псевдоклассы и псевдоэлементы в целом не новы и появились еще до версии CSS3,
однако в спецификациях CSS3 были добавлены отдельные псевдоклассы, обеспечи-
вающие более точный контроль над выбором элементов документа. Многие новые
селекторы представляют собой структурные псевдоклассы.

чем пСевдоклаСС отличаетСя от пСевдоэлемента?

Вот самый простой способ запомнить, чем отличаются эти два понятия: псевдоклассы
выбирают элементы HTML, к которым можно было бы добавить классы, в то время как
псевдоэлементы выбирают объекты, которые даже не являются элементами HTML.
В CSS есть четыре псевдоэлемента; это ::first-line, ::first-letter, ::before и ::after. Все они на-
целены на фрагменты других элементов HTML, а не на отдельные элементы сами по себе.

www.trk.kg