HTML-верстка: инструменты и приемы профессиональной front-end разработки

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


назад вперед

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


Синтаксис

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

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

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

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


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

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

Пример

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

Посмотреть

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

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


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

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

Пример

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

<a class="red" href="www.google.com">Гугл. Знает все!</a>

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


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

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

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

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

В следующем примере, мы выделим первый элемент <p> в пределах всего документа:

Пример

<html>
<head>
<style type="text/css">
p:first-child
{
color:blue;
}
</style>
</head>

<body>
<p>Я параграф.</p>
<p>Я тоже параграф.</p>
</body>
</html>

 

Посмотреть


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

В этом примере мы выделим первые элементы <i> во всех элементах <p>:

Пример

<html>
<head>
<style type="text/css">
p > i:first-child
{
font-weight:bold;
}
</style>
</head>

<body>
<p>Я <i>выделенный</i> параграф. Я <i>выделенный</i> параграф.</p>
<p>Я <i>выделенный</i> параграф.Я <i>выделенный</i> параграф.</p>
</body>
</html>

 

Посмотреть


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

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

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

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

Пример

<html>
<head>
<style type="text/css">
q:lang(no) {quotes: "~" "~";}
</style>
</head>

<body>
<p>Это текст, <q lang="no">содержащий цитату</q> это продолжение текста.</p>
</body>
</html>

 

Посмотреть


Примеры

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

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


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

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

Название Описание CSS
:active Стиль ссылки в момент щелчка мышью 1
:first-child Стиль элемента, который встречается первый раз в пределах родительского элемента 2
:focus Стиль элемента, на который наведен курсор клавиатуры 2
:hover Стиль элемента, над которым находится курсор мыши 1
:lang Стиль элемента с атрибутом lang 2
:link Стиль непосещенной ссылки 1
:visited Стиль посещенной ссылки 1


Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта