2. Псевдоклассы и псевдоэлементы
A. Селектор потомков после :hover
Пример
а: диапазон наведения { цвет: #0f0; } |
описывать
Элемент может быть позиционирован с помощью селектора, следующего за псевдоклассом :hover, точно так же, как и селекторы-потомки. В приведенном выше примере изменится цвет текста в элементе span внутри элемента a при наведении указателя мыши.
Статус поддержки
IE6 Нет IE7 Да IE8 Да |
B. Псевдокласс Chain
Пример
а:первый-ребенок:hover { цвет: #0f0; } |
описывать
Псевдоклассы могут быть объединены в цепочку для сужения выбора элементов. В приведенном выше примере будет найден первый тег a под каждым родительским элементом и применен к нему псевдокласс P при наведении.
Статус поддержки
IE6 Нет IE7 Да IE8 Да |
C. :наведите указатель мыши на неякорные элементы
Пример
div:hover { цвет: #f00; } |
описывать
Псевдокласс :hover можно применить к состоянию наведения любого элемента, а не только тега.
Статус поддержки
IE6 Нет IE7 Да IE8 Да |
D.: псевдокласс первого дочернего элемента
Пример
div li:first-child { фон: синий; } |
описывать
Измените псевдокласс, чтобы найти первый дочерний элемент родительского элемента каждого указанного элемента.
Статус поддержки
IE6 Нет IE7 Да IE8 Да |
Ошибки
В IE7, если перед первым позиционируемым дочерним элементом есть комментарий HTML, псевдокласс первого дочернего элемента будет недействителен.
E.: псевдокласс фокуса
Пример
а: фокус { граница: 1 пиксель, сплошная красная; } |
описывать
Этот псевдокласс находит все элементы, имеющие фокус клавиатуры.
Статус поддержки
IE6 Нет IE7Нет IE8 Да |
F. :before и :after псевдоклассы
Пример
#box:до { content: «Этот текст находится перед полем»; } #box:after { content: «Этот текст находится за рамкой»; } |
описывать
Эти два псевдоэлемента добавляют сгенерированный контент до и после указанного элемента соответственно и используются вместе с атрибутом контента.
Статус поддержки
IE6 Нет IE7Нет IE8 Да |
3. Поддержка атрибутов
A. Фактический размер, создаваемый по положению
Пример
#коробка { позиция: абсолютная; верх: 0; справа: 100 пикселей; слева: 0; внизу: 200 пикселей; фон: синий; } |
описывать
Определение значений верхнего, правого, нижнего и левого для абсолютно позиционированного элемента даст элементу его фактический размер (ширину и высоту), хотя значения ширины и высоты не заданы.
Статус поддержки
IE6 Нет IE7 Да IE8 Да |
B. Минимальная высота и минимальная ширина
Пример
#коробка { минимальная высота: 500 пикселей; минимальная ширина: 300 пикселей; } |
описывать
Эти два свойства определяют минимальную ширину и высоту элемента соответственно, позволяя блоку быть больше указанного минимального значения, но не меньше. Их можно использовать вместе или по отдельности.
Статус поддержки
IE6 Нет IE7 Да IE8 Да |
C. Максимальная высота и максимальная ширина
Пример
#коробка { максимальная высота: 500 пикселей; максимальная ширина: 300 пикселей; } |
описывать
Эти два свойства определяют максимальную высоту и ширину элемента соответственно. Поле может быть меньше указанного максимального значения, но не больше. Их также можно использовать вместе или по отдельности.
Статус поддержки
IE6 Нет IE7 Да IE8 Да |