Псевдоэлементы и псевдоклассы
Псевдокласс :first-child
Псевдокласс :first-child соответствует элементу, который является первым ребенком данного элемента. В следующем примере субъектами селектора будут те элементы P, которые являются первым ребенком элемента DIV:
DIV > P:first-child { text-indent: 3em }
В результате первый элемент P внутри DIV в следующем фрагменте будет выводиться с отступом в начале текста
<P>Последний абзац перед примечанием.</P> <DIV class="note"> <P>Первый абзац внутри примечания.</P> </DIV>
а такой же элемент P в этом фрагменте отображается без отступа, т. к. не является первым ребенком DIV:
<P>Последний абзац перед примечанием.</P> <DIV class="note"> <H2>Примечание.</H2> <P>Первый абзац внутри примечания.</P> </DIV>
Следующее правило указывает, что элемент EM, содержащийся в элементе P, который является первым ребенком, должен отображаться полужирным шрифтом:
P:first-child EM { font-weight: bold }
Следующие два селектора эквивалентны между собой:
* > A:first-child /* A является первым ребенком любого элемента */ A:first-child /* То же самое */
Поддержка : | | Не поддерживаются | | | Не поддерживаются |
Псевдоклассы :link и :visited
Обозреватели часто по-разному отображают уже посещенные и еще не посещенные гиперссылки. CSS обеспечивает возможность задания стилей их отображения через псевдоклассы :link (не посещенная гиперссылка) и :visited (посещенная гиперссылка). Какой именно элемент задает анкеры гиперссылок, определяется языком документа. В языке HTML анкеры задаются элементом A, поэтому следующие декларации эквивалентны:
A:link { color: red } :link { color: red }
Если следующая гиперссылка
<A class="external" href="http://www.out.com/">Внешняя ссылка</A>
будет посещена пользователем, то правило
A.external:visited { color: blue }
вызовет ее отображением голубым цветом.
Поддержка : | | Соответствие стандарту (5.0+) | | | Не поддерживает :visited (4.0+) |
Псевдоклассы :hover, :active и :focus
Стиль отображения некоторых элементов может динамически изменяться в результате определенных действий пользователя. Для этого CSS содержит три следующих псевдокласса:
Псевдокласс :hover применяется к соответствующему элементу, когда пользователь навел курсор мыши на этот элемент, но не активировал его щелчком мыши.
Псевдокласс :active применяется к соответствующему элементу, когда пользователь активировал его щелчком мыши.
Псевдокласс :focus применяется к соответствующему элементу, когда он получает фокус (в результате нажатия определенных клавиш).
Эти псевдоклассы не являются взаимно исключающими; возможны ситуации, когда к элементу будут одновременно применены правила отображения, заданные несколькими из них.
CSS не определяет, к каким именно элементам могут применяться указанные псевдоклассы. Однако, современные обозреватели поддерживают их только применительно к элементам A, например:
A:link { color: red } /* непосещенные ссылки */ A:visited { color: blue } /* посещенные ссылки */ A:hover { color: yellow } /* ссылки под курсором мыши*/ A:active { color: lime } /* активные ссылки */
Поддержка : | | Поддерживает :hover и :active только применительно к элементу A (5.0+) | | | Не поддерживаются (4.0+) |
Псевдокласс :lang
Псевдокласс :lang(код языка) указывает на язык элемента. В языке HTML язык элемента задается атрибутом lang или соответствующим метаописателем; в языке XML - атрибутом XML:LANG. Например, следующие правила задают кавычки для элементов, написанных на английском и русском языках соответственно:
HTML:lang(en) { quotes: "" " " "" } HTML:lang(ru) { quotes: """ """ "\2039" "\203A" }
Поддержка : | | Не поддерживается | | | Не поддерживается |
Псевдоэлементы
Псевдоэлемент :first-line
Псевдоэлемент :first-line применим к любому блочному элементу и задает стиль отображения его первой строки. Например, следующий фрагмент HTML-документа
<STYLE> P:first-line { text-transform: uppercase } </STYLE>
<P>Это длинный абзац, который будет разбит обозревателем на несколько строк. При этом первая строка абзаца будет отображаться прописными буквами, как это задано в таблице стилей.</P>
будет отображаться так:
ЭТО ДЛИННЫЙ АБЗАЦ, КОТОРЫЙ БУДЕТ РАЗБИТ ОБОЗРЕВАТЕЛЕМ НА НЕСКОЛЬКО СТРОК. ПРИ ЭТОМ первая строка абзаца будет отображаться прописными буквами, как это задано в таблице стилей.
К данному псевдоэлементу применимы только следующие свойства: свойства шрифтов, свойства цвета, свойства фона, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, text-shadow и clear.
Поддержка : | | Соответствие стандарту (5.5+) | | | Не поддерживается (4.0+) |
Псевдоэлемент :first-letter
Псевдоэлемент :first-letter применим к любому блочному элементу и задает стиль отображения его первой буквы. Например, следующий фрагмент HTML-документа
<STYLE> P:first-letter { font-size: 200%; font-weight: bold } </STYLE>
<P>Это абзац, первая буква которого будет выделена обозревателем.</P>
будет отображаться так: Это абзац, первая буква которого будет выделена обозревателем.
К данному псевдоэлементу применимы только следующие свойства: свойства шрифтов, свойства цвета, свойства фона, свойства границ, свойства заполнителей, свойства рамок, text-decoration, vertical-align (только если float равно none), text-transform, line-height, float, text-shadow и clear.
Поддержка : | | Соответствие стандарту (5.5+) | | | Не поддерживается (4.0+) |
Псевдоэлементы :before и :after
Псевдоэлементы :before и :after используются для вставки автоматически генерируемого содержимого соответственно перед или после указанного элемента. Подробно они описаны в этом пункте
Поддержка : | | Не поддерживаются | | | Не поддерживаются |
1 2 3
8 8 8
| |