CSS псевдо-классы используются для добавления специальных эффектов для некоторых селекторов.
Синтакс
Синтакс псевдо-классов:
selector:pseudo-class {property:value;}
Классы CSS также могут быть использованны вместе с псевдо-классами:
selector.class:pseudo-class {property:value;}
Якорь псевдо-классов
Ссылки могут отображаться по-разному в поддерживающих CSS-браузерах:
Пример 1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a:link { color:#FF0000; } /* unvisited link */
a:visited { color:#00FF00; } /* visited link */
a:hover { color:#FF00FF; } /* mouse over link */
a:active { color:#0000FF; } /* selected link */
</style>
</head>
<body>
<p><b><a href="/ru/" target="_blank">Это линк</a></b></p>
<p><b>Примечание:</b> a:hover ДОЛЖЕН указываться после a:link и a:visited в определении CSS для того, чтобы иметь эффект.</p>
<p><b>Примечание:</b> a:active ДОЛЖЕН указываться после a:hover в определении CSS для того, чтобы иметь эффект.</p>
</body>
</html>
Примечание: a:hover ДОЛЖЕН указываться после a:link и a:visited в определении CSS для того, чтобы иметь эффект!!
Примечание: a:active ДОЛЖЕН указываться после a:hover в определении CSS для того, чтобы иметь эффект!!
Примечание: Имена псевдо-классов не чувствительны к регистру.
Псевдо-классы и классы CSS
Псевдо-классы могут комбинироваться с классами CSS:
Если ссылка в приведенном выше примере была посещена, она будет отображаться красным цветом.
CSS - Псевдо-класс :first-child
Псевдо-класс :first-child соответствует указанному элементу, который является первым потомком другого элемента.
Примечание: Для того, чтобы :first-child работал в IE, обязательно укажите !DOCTYPE.
Отмечает первый элемент <p>
В следующем примере, селектор отмечает любой элемент <p>, который является первым потомком любого элемента:
Пример 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p:first-child { color:blue; }
</style>
</head>
<body>
<p>Это некоторый текст.</p>
<p>Это некоторый текст.</p>
<p><b>Примечание:</b> Для того, чтобы :first-child работал в IE, обязательно укажите !DOCTYPE.</p>
</body>
</html>
Отмечает первый элемент <i> во всех элементах <p>
В следующем примере, селектор отмечает первый элемент <i> во всех элементах <p>:
Пример 3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p > i:first-child { color:blue; }
</style>
</head>
<body>
<p>Я a <i>сильный</i> человек. Я <i>сильный</i> человек.</p>
<p>Я a <i>сильный</i> человек. Я <i>сильный</i> человек.</p>
<p><b>Примечание:</b> Для того, чтобы :first-child работал в IE, обязательно укажите !DOCTYPE.</p>
</body>
</html>
Отмечает все элементы <i> во всех первых потомках элементов <p>
В следующем примере, селектор отмечает все элементы <i> в элементах <p>, которые являются первыми потомками другого элемента:
Пример 4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p:first-child i { color:blue; }
</style>
</head>
<body>
<p>Я <i>сильный</i> человек. Я <i>сильный</i> человек.</p>
<p>Я <i>сильный</i> человек. Я <i>сильный</i> человек.</p>
<p><b>Примечание:</b> Для того, чтобы :first-child работал в IE, обязательно укажите !DOCTYPE.</p>
</body>
</html>
CSS - Псевдо-класс :lang
Псевдо-класс :lang позволяет определить специальные правила для различных языков.
Примечание: Internet Explorer 8 (и выше) поддерживает псевдо-класс :lang если указан !DOCTYPE.
В примере ниже, класс :lang определяет кавычки для элементов q с lang="no":
Пример 5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
q:lang(no) { quotes: "~" "~"; }
</style>
</head>
<body>
<p>Некоторый текст <q lang="no">Цитата в параграфе</q> Некоторый текст.</p>
<p>В этом примере, :lang определяет кавычки для элементов q с lang="no":</p>
<p><b>Примечание:</b> Internet Explorer 8 (и выше) поддерживает псевдо-класс :lang если указан !DOCTYPE.</p>
</body>
</html>
Больше примеров
Пример 6
Этот пример демонстрирует, как добавить другие стили к гиперссылкам.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link { color:#ff0000; }
a.two:visited { color:#0000ff; }
a.two:hover { font-size:150%; }
a.three:link { color:#ff0000; }
a.three:visited { color:#0000ff; }
a.three:hover { background:#66ff66; }
a.four:link { color:#ff0000; }
a.four:visited { color:#0000ff; }
a.four:hover { font-family:monospace; }
a.five:link { color:#ff0000; text-decoration:none; }
a.five:visited { color:#0000ff; text-decoration:none; }
a.five:hover { text-decoration:underline; }
</style>
</head>
<body>
<p>Наведите курсор мыши на ссылку, чтобы увидеть как изменяется структура.</p>
<p><b><a class="one" href="/ru/" target="_blank">Этот линк меняет цвет</a></b></p>
<p><b><a class="two" href="/ru/" target="_blank">Этот линк меняет размер шрифта</a></b></p>
<p><b><a class="three" href="/ru/" target="_blank">Этот динк меняет цвет фона</a></b></p>
<p><b><a class="four" href="/ru/" target="_blank">Этот линк меняет семейство шрифта</a></b></p>
<p><b><a class="five" href="/ru/" target="_blank">Этот линк меняет украшение</a></b></p>
</body>
</html>
Пример 7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
input:focus { background-color:yellow; }
</style>
</head>
<body>
Имя: <input type="text" name="fname" /><br />
Фамилия: <input type="text" name="lname" /><br />
<input type="submit" value="Отправить" />
<p><b>Примечание:</b> Internet Explorer 8 (и выше) поддерживает псевдо-класс :focus если указан !DOCTYPE.</p>
</body>
</html>
Псевдо-классы
Номер в колонке "CSS" указывает, в какой версии CSS свойство определено (CSS1 или CSS2).
| Псевдо имя | Описание | CSS |
|---|---|---|
| :active | Добавляет стиль к элементу, который активируется | 1 |
| :first-child | Добавляет стиль к элементу, который является первым потомком другого элемента | 2 |
| :focus | Добавляет стиль к элементу, имеющему фокус ввода с клавиатуры | 2 |
| :hover | Добавляет стиль к элементу при наведении указателя мыши над ним | 1 |
| :lang | Добавляет стиль к элементу с конкретным атрибутом lang |
2 |
| :link | Добавляет стиль к непосещенной ссылке | 1 |
| :visited | Добавляет стиль к посещенной ссылке | 1 |
Была ли эта информация полезной?
