Связь и интернет Архив Программирование
   
Сделать стартовойСделать закладку            
   ПОИСК  
   
Главная / CSS / Не для новичков /
8  Perl
8  PHP
8  JavaScript
8  HTML
8  DHTML
8  XML
8  CSS
8  C / C++
8  Pascal и Delphi
8  Турбо Ассемблер
8  MySQL
8  CASE-технологии
8  Алгоритмы
8  Python
8  Обратная связь
8  Гостевая книга
Новости о мире


Селекторы, псевдоклассы и псевдоэлементы - Программирование от RIN.RU
Селекторы, псевдоклассы и псевдоэлементы



Псевдоэлементы и псевдоклассы


Псевдокласс :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  Обсудить в чате

8  В тему

Введение в таблицы стилей

Значения свойств, каскадность и наследование

Границы, заполнители и рамки

Позиционирование элементов

Визуализация элементов

Цвет и фон

Шрифты

Текст

Таблицы

Генерация содержимого, нумерация и списки

Страничные устройства вывода

Звуковые таблицы стилей

 
  
  
    Copyright ©  RIN 2003 - 2004      * Обратная связь