Псевдокласи

Псевдокласи визначають динамічний стан елементів, який змінюється з часом або внаслідок дій користувача, а також ієрархію у дереві документа. Прикладом такого стану служить текстове посилання, яка змінює свій колір при наведенні на нього курсора миші. При використанні псевдокласів браузер не перевантажує поточний документ.

Синтаксис застосування псевдокласів наступний:

Елемент:псевдоклас {Опис правил стилю}

Допускається застосовуння псевдокласів до імен ідентифікаторів або класів ( A.menu:hover {color:green}) і контекстних селекторів (.menu A:hover {background:#fc0}).

Псевдокласи, що визначають стан елементів

До цієї групи відносяться псевдокласи, які визначають поточний стан елемента і застосовують стиль до нього тільки у визначеному випадку. Псевдокласи, що визначають стан елементів, перелічені у наступній таблиці:

Псевдоклас	Опис
active	Активація користувачем елементу. Наприклад, наведенням курсору на посилання або натисненням лівої кнопки миші.
link	Застосовується до невідвідуваних посилань (посилань, на які користувач ще не натискав). Браузер зберігає історію відвідувань деякий час, тому посилання може бути позначене як відвідане у випадку, якщо по ньому був зафіксований перехід раніше.
focus	Застосовується до елемента при отриманні ним фокусу. Наприклад, для текстового поля форми отримання фокусу означає, що курсор встановлений у полі, і за допомогою клавіатури можна вводити в нього текст. <style INPUT: focus {color: red;} </style>
hover	Псевдоклас hover активізується, коли курсор миші знаходиться в межах елементу, але клацання по ньому не відбувається.
visited	Псевдоклас застосовується до відвіданих посилань. Зазвичай таке посилання змінює свій колір за замовчуванням на фіолетовий, але за допомогою стилів колір та інші параметри можна задати самостійно.

Псевдокласи link та visited можуть застосовуватися тільки до посилань, а псевдокласи active та hover - і до інших елементів документа.

Псевдокласи, що мають відношення до дерева документа

До цієї групи відносяться псевдокласи, які визначають положення елемента у дереві документа і застосовують до нього стиль залежно від його статусу. Таких псевдокласів не так багато, але деякі браузери розширюють цей список. Наприклад, Netscape підтримує досить велику кількість псевдокласів, які можна віднести до цієї групи.

Псевдоклас first-child застосовується до першого дочірнього елемента селектора. Наприклад:

<head>
<style type="text/css">
B:first-child {color: red; /*Червоний колір тексту*/}
</style>
</head>
<body>
first-child, other,other.
first-child again, other,other.
</body>

Результат прикладу такий:

first-child, other,other.

first-child again, other,other.

У даному прикладі псевдоклас first-child додається до селектора B і встановлює для нього червоний колір тексту. Хоча контейнер зустрічається у першому абзаці двічі, червоним кольором буде виділено лише перша згадка. З наступним абзацом все починається знову, оскільки батьківський елемент помінявся.