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

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

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

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

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

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

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

Пример

<style type="text/css">
    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>

<style type="text/css">
    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

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

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

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

Пример

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

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

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

Пример

<style type="text/css">
    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>

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

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

Пример

<style type="text/css">
    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>

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

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

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

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

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

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

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

Пример

<style type="text/css">
    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>

Пример

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

Пример

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

Пример

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

Пример

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

Пример

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

Пример

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

Пример

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

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

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

Пример

<style type="text/css">
    :not(li) {text-align: justify;}
    i:not(#ii) {color: #00c;}
    div:not(.abs) {position: relative;}
    td:not(:empty) {background-color: #ccc;}
    input:not([type="submit"]) {border: 1px solid #999; padding: 3px 6px;}
</style>

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

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