Селекторы псевдоклассов

Псевдоклассы позволяют применять различные стили к элементам, в зависимости от их состояния.

К примеру, к ссылке могут быть применены различные стили в зависимости от того, является ли ссылка еще не посещенной, находится ли в "фокусе" курсора.

Доступны следующие "состояния" элементов:

• active – стиль применяется к элементу, активированному пользователем;
• link – стиль применяется к непосещенным ссылкам;
• focus – стиль применяется к элементу при получении им фокуса;
• hover – стиль активизируется, когда курсор находится в пределах элемента;
• visited – стиль применяется к посещенным гиперссылкам;
• first- child – стиль применяется к первому дочернему элементу селектора.

Пример оформления стилей псевдоклассов:

Селекторы псевдоэлементов

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

Доступны следующие псевдоэлементы:

• after – позволяет добавить контент после указанного элемента;
• before – позволяет добавить контент до указанного элемента;
• first- letter – задает стиль для первого символа в тексте элемента;
• first-line – задает стиль первой строки текста элемента.

Пример оформления:

Ключевые термины и определения

Псевдоклассы – это атрибуты, назначаемые строго к селекторам с намерением определить реакцию или состояние для данного селектора

Псевдоэлементы – это условные фиктивные элементы, которые являются частью существующих элементов или вводятся в документ дополнительно.

Краткие итоги

Данной лекцией мы заканчиваем знакомство с каскадными таблицами стилей. Нами были рассмотрены все базовые приемы работы со стилями.

Подбор стиля, который будет хорошо смотреться – задача нетривиальная и довольно трудоемкая, однако существует множество тематических сайтов с готовыми стилями, что значительно упрощает жизнь начинающему веб - разработчику.

Список материалов для самостоятельного изучения

1. http://www.w3.org/TR/CSS2/selector.html#type-selectors
2. http://www.w3.org/TR/selectors/
3. http://www.alfafreedesign.ru/selektor-css.html
4. http://vgi.volsu.ru:8000/~Vladimir.Dronov/books/html5_css3_web2.0_2.html