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

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

Динамические псевдоклассы CSS

:link

определяет стилевое оформление ссылок, которые еще не посещались пользователем.

Исключением являются метки, на них действие :link не распространяется:

<a name="top"></a>

:visited

определяет стилевое оформление ссылок, посещенных пользователем.

Через какое-то количество времени браузер может вернуть ссылке статус непосещенной (:link).

:hover

применяется, если пользователь наводит на элемент указатель мыши.

Псевдокласс :hover может быть применен не только к ссылкам. При наведении указателя мыши можно подсветить строку таблицы.

Пример

<style>
    table {
        border-collapse: collapse;
    }
    th,
    td {
        padding: 0 3px;
        border: 1px solid #000;
    }
    tr:hover{
        background-color:#deebec;
    }
</style>
<table>
    <tr>
        <th>символ</th>
        <th>html-код</th>
        <th>десятичный<br>код</th>
    </tr>
    <tr><td>неразрывный пробел</td><td>&nbsp;</td><td>&#160;</td></tr>
    <tr><td>пробел шириной в букву n</td><td>&ensp;</td><td>&#8194;</td></tr>
    <tr><td>пробел шириной в букву m</td><td>&emsp;</td><td>&#8195;</td></tr>
    <tr><td>тире шириной в букву n</td><td>&ndash;</td><td>&#8211;</td></tr>
    <tr><td>тире шириной в букву m</td><td>&mdash;</td><td>&#8212;</td></tr>
</table>

:active	применяется, если элемент активирован пользователем. Например, пользователь нажимает левую кнопку мыши на ссылку.
:focus	применяется, если элемент получает фокус. Например, для текстового поля формы получение фокуса означает, что курсор установлен в поле:

<style>
    input[type=text] {
        border: 1px solid #ccc;
        padding: 2px 5px;
    }
    input[type=text]:focus {
        border: 1px solid #cff;
        box-shadow: 0 0 10px rgba(98, 98, 206, 0.5);
    }
</style>
<form action="">
    <input type="text">
</form>

Целевой псевдокласс :target

:target

применяется к целевому элементу.

В адресе ссылки (URL) иногда указывается знак # и имя идентификатора. Например:

<a href="/analiz/seo/seo_other.php#partner">Партнерская программа</a>

Это значит, что ссылка ведет не на начало документа, а на элемент с указанным идентификатором (атрибутом id). Такой элемент и есть целевой элемент.

Пример

Псевдокласс языка :lang

:lang

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

С помощью псевдокласса :lang можно задавать настройки, характерные для разных языков, например, тип кавычек.

Двухсимвольные обозначения некоторых языков

de	Немецкий
en	Английский
fr	Французский
ru	Русский

Пример

<style>
    li {
        font: 18px serif;
    }
    q:lang(de) {
        quotes: "\201E" "\201C"; /* Немецкие кавычки */
    }
    q:lang(en) {
        quotes: "\201C" "\201D"; /* Английские кавычки */
    }
    q:lang(fr) {
        quotes: "\00AB" "\00BB"; /* Французские кавычки */
    }
</style>
<ul>
    <li>Цитата на немецком языке:
        <q lang="de">In Hoffnung schweben, macht süß das Leben</q>.
    </li>
    <li>Цитата на английском языке:
        <q lang="en">То be or not to be</q>.
    </li>
    <li>Цитата на французском языке:
        <q lang="fr">Dans chaque malheur – cherchez la femme</q>.
    </li>
</ul>

Псевдоклассы состояний

:enabled

определяет доступный элемент формы. Пример

По умолчанию (если нет атрибута disabled) все элементы форм доступны.

:disabled	определяет недоступный (заблокированный) элемент формы. Пример
:checked	определяет включенные флажки (checkbox) и переключатели (radio). Устанавливается состояние «включено» пользователем или с помощью атрибута checked тега <input>.

Пример

<style>
    input[type="checkbox"] + span {
        position: relative;
        top: -2px;
        left: 3px;
    }
    input[type="checkbox"]:checked + span {
        color: #039;
        text-decoration: underline;
    }
</style>
<p>Какой напиток Вы предпочитаете пить по утрам?</p>
<div style="float:left; margin-right: 50px;">
    <label><input type="checkbox" checked name="a1"><span>Кофе</span></label><br>
    <label><input type="checkbox" name="a2"><span>Чай</span></label><br>
    <label><input type="checkbox" name="a3"><span>Какао</span></label>
</div>
<label><input type="checkbox" name="a4"><span>Сок</span></label><br>
<label><input type="checkbox" name="a5"><span>Вода</span></label><br>
<label><input type="checkbox" name="a6"><span>Рассол</span></label>

:indeterminate

определяет неопределенные флажки (checkbox) и переключатели (radio).

Неопределенное состояния для флажков является чисто визуальным эффектом и маскирует истинное состояние (включен или выключен). Установить в HTML-коде неопределенное состояние нельзя, т.к. нет специального атрибута. Это можно сделать только в JavaScript. Пример

Структурные псевдоклассы

Структурные псевдоклассы позволяют выбрать элемент на основе дополнительной информации, которая лежит в дереве документа, но не может быть представлена простыми селекторами.

:root

определяет корневой элемент документа.

Для HTML-документа корневым является <html> элемент. Поэтому следующие записи идентичны:

html {background-color: #f3f3f3;}
:root {background-color: #f3f3f3;}

Но CSS применяются не только к HTML-документам, но и к XML-страницам, а также к SVG-файлам. Использование псевдокласса :root дает более универсальную форму записи для доступа к корневому элементу страницы. Это особенно важно при непрерывном развитии web-технологий и постоянном появлении новых мобильных устройств.

:nth-child(номер)

определяет элемент по его номеру в дереве элементов.

Значения номера

число

Дочерний элемент с заданным номером.

an+b

Дочерний элемент с номером an+b, где a и b заданные числа, n – счетчик, который автоматически принимает значение 0, 1, 2...

even

Все чётные элементы.

odd

Все нечётные элементы.

Пример

<style>
    td:nth-child(4) {text-align: right;} /* четвертая ячейка в строке таблицы */
    tr:nth-child(3n+1) {font-weight: bold}; /* 1, 4, 7, 10... строки таблицы */
    tr:nth-child(even) {background: #ccc;} /* чётные строки таблицы */
    tr:nth-child(odd) {background: #fcc;} /* нечётные строки таблицы */
</style>

:nth-last-child(номер)

определяет элемент по его номеру в дереве элементов, считая с конца.

Пример

<style>
    tr:nth-last-child(-n+2) {background: #999;} /* две последние строки таблицы */
</style>

:nth-of-type(номер)

определяет дочерний элемент указанного типа по его номеру в дереве элементов.

Пример

<style>
    h3:nth-of-type(odd) {color: #369;} /* нечётные заголовки h3 */
    h3:nth-of-type(even) {color: #c33;} /* чётные заголовки h3 */
</style>

:nth-last-of-type(номер)

определяет дочерний элемент указанного типа по его номеру в дереве элементов, считая с конца.

Пример

<style>
    p:nth-last-of-type(1) {text-align: right; font-style: italic;} /* последний абзац */
</style>

:first-child

определяет первый дочерний элемент родителя.

Пример

<style>
    td:first-child {text-align: center;} /* первая ячейка строки – первый столбец таблицы */
</style>

:last-child

определяет последний дочерний элемент родителя.

Пример

<style>
    td:last-child {text-align: right;} /* последняя ячейка строки – последний столбец таблицы */
</style>

:first-of-type

определяет первый дочерний элемент указанного типа в дереве элементов.

Пример

<style>
    h2:first-of-type {text-align: center;} /* первый заголовок второго уровня */
</style>

:last-of-type

определяет последний дочерний элемент указанного типа в дереве элементов.

Пример

<style>
    p:last-of-type {text-align: right; font-style: italic;} /* последний абзац */
</style>

:only-child	определяет дочерний элемент, если он у родителя единственный. Пример
:only-of-type	определяет дочерний элемент указанного типа, если он у родителя единственный. Пример
:empty	определяет пустой элемент, т.е. элемент который не содержат ни дочерних элементов, ни текста, ни пробелов. Пример
:has(X)	определяет элемент по его родственным и/или дочерним элементам. Можно задать список атрибутов, указав их через запятую. Поддержка псевдокласса :has()

Пример

<style>
    h1:has(+ h2) {margin-bottom: 16px;} /* h1, после которого сразу следует h2 */
    div:has(h3, h4) {background-color: #E7F5FE;} /* div, содержащий h3 или h4 */
    div:has(h3):has(h4) {background-color: #E7F5FE;} /* div, содержащий и h3, и h4 */
</style>

Псевдокласс отрицания :not

:not(X)

определяет элемент, который не содержит указанный селектор X. Пример

В качестве аргумента X могут быть указаны теги, идентификаторы, классы, псевдоклассы и селекторы атрибутов. В качестве аргумента X нельзя использовать псевдоэлементы и псевдокласс :not(), т.е. отрицание не может быть вложенным и запись :not(:not(...)) неверна.

Пример

<style>
    :not(li) {text-align: justify;}
    i:not(#ii) {color: #00c;}
    div:not(.abs) {position: relative;}
    td:not(:empty) {background-color: #ccc;} /* все непустые */
    li:not(:last-child) {margin-bottom: 16px;} /* все, кроме последнего */
    input:not([type="submit"]) {border: 1px solid #999; padding: 3px 6px;}
</style>

У псевдокласса :not() можно задать список атрибутов, указав их через запятую.

Пример

<style>
    a:not([class], :only-child) {background-color: #f3a84d;}
</style>

В этом примере задан фоновый цвет для ссылок, у которых не задан атрибут class и которые не являются единственным дочерним элементом.

Смотрите также:

• Свод стилей
• Псевдоэлементы
• Как обратиться к свойствам CSS-стилей из JavaScript

.
Прокомментировать/Отблагодарить