Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника

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

В CSS2 правила обычно подключаются к элементу, основываясь на его позиции в структуре документа. Данная модель подходит для большинства случаев, однако вследствие структуры иногда применить такую модель не представляется возможным. К примеру, в HTML 4.0 нет элемента ссылающегося на первую линию параграфа, и поэтому нет одиночного CSS селектора ссылающегося на такой элемент. CSS поддерживает концепцию псевдо-элементов и псевдо-классов, позволяющих производить форматирование на основе информации находящейся за пределами структуры документа.

  1. Псевдо-элементы создают абстракцию о структуре документа основываясь на данных, находящихся за пределами языка документа. К примеру язык документа не поддерживает механизм, позволяющий получить доступ к первой букве или первой строке содержимого элемента(ов). Псевдо-элементы в CSS позволяют получить доступ к данной информации. Псевдо –элементы предоставляю путь разработчикам для назначения стиля к содержимому, которое ещё не существует в документе (например псевдо-элементы :before или :after предоставляют доступ к сгенерированному содержимому).
  2. Псевдо-классы классифицируют элементы на основе характеристики отличной от их имени атрибутов, содержания. Псевдо классы могут быть динамичными, что отражается на восприятии элемента, пока пользователь с ним взаимодействует. Исключения из данных слов составляет псевдо-селектор ":first-child", который может быть выведен из структуры документа.

Псевдо класс :first-child

Псевдо класс :first-child находит элементы являющиеся первыми дочерними элементами для родительского элемента. В следующем примере, селектор соответствует всем P элементам, которые являются первыми дочерними элементами для элемента DIV. Это правило устанавливает отступ для первого параграфа, расположенного внутри элемента DIV.

  1.DIV > P:first-child { text-indent: 0 }

Для поиска элемента P необходим следующий код:

  1.<P> The last P before the note.
  2.<DIV class="note">
  3.<P> The first P inside the note.
  4.</DIV>
  5.
Однако данный селектор не найдет элемент P в следующем фрагменте:
  1.<P> The last P before the note.
  2.<DIV class="note">
  3.<H2>Note</H2>
  4.<P> The first P inside the note.
  5.</DIV>
  6.

В следующем примере, с помощью псевдо класса :first-child, будет добавлено свойство "font-weight" равное "bold" для элемента EM, являющегося потомком первого дочернего элемента P.

  1.P:first-child EM { font-weight : bold }
  2.

Следующие два селектора эквивалентны:

  1.* > A:first-child /* A является первым дочерним элементом для любого элемента/
  2.A:first-child /* То же самое */
  3.

Ссылки псевдо-класса

По общему правилу браузер отображает ссылки не посещенными. Однако для пользователя будет удобным, если Вы постарается установить различия в отображении посещенных и непоселенных ссылок. Как раз для этих целей созданы псевдо-классы ":link" и ":visited".

  1. ":link" устанавливает стиль к элементам ссылкам, которые ещё не были посещены.
  2. ":visited" устанавливает стиль к элементам ссылкам, которые были посещены.
</codeinp> Примечание. После определенного времени браузер может возвращать состояние посещенной ссылки к не посещенной. Два, указанных состояния, являются взаимоисключающими, то есть нельзя одновременно применить к элементу обо псевдо-класса.

Псевдо-класс ссылки применяется к элементам A. Указанные ниже два правила имеют одинаковый эффект:

  1.A:link { color: red }
  2.:link { color: red }
  3.

Пример для следующего кода:

  1.<A class="external" href="http://out.side/">external link</A>
  2.

с правилом CSS2

  1.<A class="external" href="http://out.side/">external link</A>
  2.
Приведет к изменению цвета текста ссылки, по которой пользователь куда - либо переходил, на синий.

Динамические псевдо-классы :hover, :active, :focus.

Браузер позволяет менять отображение элемента, когда пользователь взаимодействует с ним. Для этого в CSS существует три динамических псевдо-класса:

  1. псевдо-класс :hover применяется, когда происходит взаимодействие с элементом (например, при наведении курсора), но до тех пор пока элемент остается не активным. Например, когда курсор мыши перемещается над блоком, созданным тем или иным элементом. Некоторые браузеры не поддерживают данный псевдо-класс.
  2. псевдо-класс:active применятся в момент активации элемента. Например, в промежутке между нажатием кнопки мыши и её отпусканием (необходимость в данном псевдо-классе является относительной и, как правило, в большинстве случаев отсутствует);
  3. псевдо-класс :focus применяется в случае, когда элемент находится в фкусе (фокус может быть установлен с использование клавиатуры).
Данные псевдо-классы не являются взаимоисключаемыми. Одновременно к элементу могут быть применены сразу несколько таких псевдо классов.

CSS2 не определяет, для каких элементов применяются указанные псевдо-классы.

Псевдо-классы могут поддерживать любые CSS свойства. Пример:

  1.A:link { color: red } /* не посещенная ссылка*/
  2.A:visited { color: blue } /* посещенная ссылка*/
  3.A:hover { color: yellow } /* ссылка при взаимодействии пользователя с элементом*/
  4.A:active { color: lime } /* ссылка при активации элемента */
  5.
  6.

При написании кода будьте внимательны, псевдо-класс :hover должен быть размещен после псевдо-классов :link и :visited, так как иначе стилевое правило скроет эффект назначенный псевдо-классом :hover. Аналогичного порядка размещения Вы должны придерживаться при использовании псевдо-класса a:active. Исходя из этого правила, следующий пример будет логически неверным:

  1.<!DOCTYPE html>
  2.<html>
  3.<head>
  4.<TITLE>Ссылки</TITLE>
  5.<style>
  6.a:hover { display:none;}
  7.a:link { display:block;}
  8.a:visited { display:block;}
  9.</style>
10.</head>
11.
12.<body>
13.<A href="index1.html" target="_blank">1 пункт</A>
14.</body>
15.
16.</html>

Пример, демонстрирующий комбинированное использование динамических псевдо-калассов:

  1.A:focus { background: yellow }
  2.A:focus:hover { background: white }
  3.
Последний селектор найдёт элемент A, который имеет псевдо-класс :focus и псевдо-класс :hover.

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

Примечание. В CSS1 псевдо-класс :active был взаимоисключаемым с псевдо-классами :link и :visited . Однако начиная с CSS2 более это правило не поддерживается. Поэтому Вы можете применять оба псевдо-селектора ":visited" и ":active" для элемента (или ":link" и "active") не боясь ошибок.

Псевдо-класс :lang

В CSS2 возможно использовать языковой псевдо-селектор :lang. Например, в HTML 4.0 язык документа можно установить, используя атрибут lang или элемент META, либо с помощью HTTP протокола. В документах XML для этих целей предназначен атрибут XML:LANG. Существуют и другие способы определения языка документа.

В зависимости от типа языка, псевдо-класс :lang позволяет дифференцировать отображение различных символов

Следующий псевдо-класс :lang устанавливает различные варианты отображения кавычек для различных языков:

  1.HTML:lang(fr) { quotes: '« ' ' »' }
  2.HTML:lang(de) { quotes: '»' '«' '39' '3A' }
  3.:lang(fr) q { quotes: '« ' ' »' }
  4.:lang(de) q { quotes: "1C" "1D";}
  5.
Последние две пары селекторов устанавливают стиль отображения кавычек для элементов расположенных внутри элементов «родителей», псевдо-класс :lang которых соответствует французскому или немецкому языкам.


Александр Ермаков. Хостинг - www.pwstudio.org