Веб-школа



Псевдо-классы CSS используются для добавления особых эффектов некоторым селекторам.

Синтаксис

Синтаксис псевдо-классов выглядит так:

селектор:псевдо-класс {свойство:значение;}

Кроме того, вы можете использовать классы CSS вместе с псевдо-классами:

селектор.класс:псевдо-класс {свойство:значение;}

Псевдо-классы ссылок

В браузерах, поддерживающих CSS, вы можете изменять вид ссылок в зависимости от их состояния:

a:link {color:#FF0000;} /* непосещенная ссылка */ a:visited {color:#00FF00;} /* посещенная ссылка */ a:hover {color:#FF00FF;} /* ссылка, над которой находится курсор мыши */

a:active {color:#0000FF;} /* ссылка в момент щелчка мышью */

Посмотреть

При настройке стилей для ссылок надо соблюдать следующие правила:

• a:hover ДОЛЖЕН определяться только после a:link и a:visited
• a:active ДОЛЖЕН определяться после a:hover

Заметка: названия псевдо-классов не чувствительны к регистру, то есть a:active и a:Active — это одно и то же.

Псевдо-классы и классы CSS

Псевдо-классы можно комбинировать с классами CSS:

a.red:visited {color:#FF0000;}

Гугл. Знает все!

После посещения ссылки из этого примера, она станет красной.

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

Псевдо-класс :first-child применяет заданный стиль к указанному элементу, который встречается первый раз в пределах другого элемента.

Заметка: :first-child поддерживается IE, если указан !DOCTYPE.

Выделение первого элемента

В следующем примере, мы выделим первый элемент

в пределах всего документа:

p:first-child { color:blue; }

Я параграф.

Я тоже параграф.

Посмотреть

Выделение первых элементов во всех элементах

В этом примере мы выделим первые элементы во всех элементах

:

p > i:first-child { font-weight:bold; }

Я выделенный параграф. Я выделенный параграф.

Я выделенный параграф.Я выделенный параграф.

Посмотреть

Использование псевдо-класса :lang

Псевдо-класс :lang используется для применения особых стилей для различных языков.

Заметка: Internet Explorer 8 (и выше) поддерживает псевдо-класс :lang, только если указан !DOCTYPE.

Покажем, как использовать псевдо-класс :lang для отображения особых кавычек элемента q с атрибутом lang=»no»:

q:lang(no) {quotes: «~» «~»;}

Это текст, содержащий цитату это продолжение текста.

Посмотреть

Примеры

Добавление стилей ссылкам

Использование псевдо-класса :focus.

Псевдо-классы — справка CSS

Число в столбце «CSS» указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).