| Псевдоклассы определяют динамическое состояние элементов, которое изменяется со временем или с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния |
Селекторы могут содержать более одного псевдокласса, которые перечисляются подряд через двоеточие, но только в том случае, если их действия не противоречат друг другу. Так, запись A:visited:hover является корректной, а запись A:link:visited — нет. Впрочем, если подходить формально, то валидатор CSS считает правильным любое сочетание псевдоклассов.
Браузер Internet Explorer 6 позволяет использовать псевдоклассы :active и :hover только для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере работают и для других элементов.
Псевдокласс :hover не обязательно должен применяться к ссылкам, его можно добавлять и к другим элементам документа. Так, в примере 1.55 показана таблица, строки которой меняют свой цвет при наведении на них курсора мыши. Это достигается за счет добавления псевдокласса :hover к селектору TR.
Результат примера показан ниже (рис. 1.34).
Псевдоклассы, имеющие отношение к дереву документа
К этой группе относятся псевдоклассы, которые определяют положение элемента в дереве документа и применяют к нему стиль в зависимости от его статуса.:first-child
Применяется к первому дочернему элементу селектора который расположен в дереве элементов документа. Чтобы стало понятно, о чем речь, разберем небольшой код (пример 1.56).
Результат примера показан ниже (рис. 1.35).
В данном примере псевдокласс :first-child добавляется к селектору P и устанавливает для него рубленый шрифт и красный цвет текста. Хотя тег <P> внутри <div> встречается по два раза, стиль будет применяться только к первым абзацам В остальных случаях стиль внутри <p> останется исходным. Со следующим тегом <div> все начинается снова, поскольку родительский элемент
поменялся.
Браузер Internet Explorer поддерживает псевдокласс :first-child начиная с версии 7.0.Псевдокласс :first-child удобнее всего использовать в тех случаях, когда требуется задать разный стиль для первого и остальных однотипных элементов. Например, по правилам типографики красную строку для первого абзаца текста не устанавливают, а для остальных абзацев добавляют отступ первой строки С этой целью применяют свойство text-indent с нужным значением отступа. Но чтобы изменить стиль первого абзаца и убрать для него отступ потребуется воспользоваться псевдоклассом :first-child (пример 1.57).
Результат примера показан ниже (рис. 1.36).
В данном примере первый абзац текста не содержит отступа первой строки, а для остальных он установлен.
источник: designjunkie.ru
| ← Псевдоклассы, задающие язык текста | Псевдоклассы #1 → |
|---|
Комментарии:
Комментарии сайта
ВКонтакте
FacebookTags:
