Регистрация Войти
Войти через VK




Поиск по сайту



PHP Поиск



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

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

:link определяет стилевое оформление ссылок, которые еще не посещались пользователем.
a {...} и a:link {...} дают один и тот же результат, поэтому псевдокласс :link можно не указывать.

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

<a name="top"></a>
:visited определяет стилевое оформление ссылок, посещенных пользователем.

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

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

Псевдокласс :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>&amp;nbsp;</td><td>&amp;#160;</td></tr>
    <tr><td>пробел шириной в букву n</td><td>&amp;ensp;</td><td>&amp;#8194;</td></tr>
    <tr><td>пробел шириной в букву m</td><td>&amp;emsp;</td><td>&amp;#8195;</td></tr>
    <tr><td>тире шириной в букву n</td><td>&amp;ndash;</td><td>&amp;#8211;</td></tr>
    <tr><td>тире шириной в букву m</td><td>&amp;mdash;</td><td>&amp;#8212;</td></tr>
</table>

РЕЗУЛЬТАТ:

символ html-код десятичный
код
неразрывный пробел&nbsp;&#160;
пробел шириной в букву n&ensp;&#8194;
пробел шириной в букву m&emsp;&#8195;
тире шириной в букву n&ndash;&#8211;
тире шириной в букву m&mdash;&#8212;
Однако, этот метод даст осечку, если среди ячеек таблицы присутствует атрибут rowspan.
:active применяется, если элемент активирован пользователем. Например, пользователь нажимает левую кнопку мыши на ссылку.
:focus применяется, если элемент получает фокус. Например, для текстового поля формы получение фокуса означает, что курсор установлен в поле:
<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

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

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

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

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

Пример

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

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

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

Двухсимвольные обозначения некоторых языков
de Немецкий
en Английский
fr Французский
ru Русский
Пример
<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&#252;&#223; 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>

РЕЗУЛЬТАТ:

  • Цитата на немецком языке: In Hoffnung schweben, macht süß das Leben.
  • Цитата на английском языке: То be or not to be.
  • Цитата на французском языке: Dans chaque malheur – cherchez la femme.

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

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

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

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

РЕЗУЛЬТАТ:

Какой напиток Вы предпочитаете пить по утрам?





: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 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>

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

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

:nth-last-of-type(номер) определяет дочерний элемент указанного типа по его номеру в дереве элементов, считая с конца.
Пример
<style type="text/css">
    p:nth-last-of-type(1) {text-align: right; font-style: italic;} /* последний абзац */
</style>

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

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

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

:last-of-type определяет последний дочерний элемент указанного типа в дереве элементов.
Пример
<style type="text/css">
    p:last-of-type {text-align: right; font-style: italic;} /* последний абзац */
</style>

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

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

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

В качестве аргумента 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>

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


.

Популярное:


Содержание:


Новое за неделю



Сейчас на сайте: 3216
Rambler's Top100