Псевдоклассы CSS
Концепция псевдоклассов была введена, чтобы разрешить выбор на основе информации, которая лежит вне дерева документа
или не может быть выражена с помощью простых тегов. Псевдоклассы могут быть динамическими, в том смысле, что элемент
получает или теряет псевдокласс при определенных действиях пользователя.
Динамические псевдоклассы 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> </td><td> </td></tr>
<tr><td>пробел шириной в букву n</td><td> </td><td> </td></tr>
<tr><td>пробел шириной в букву m</td><td> </td><td> </td></tr>
<tr><td>тире шириной в букву n</td><td>–</td><td>–</td></tr>
<tr><td>тире шириной в букву m</td><td>—</td><td>—</td></tr>
</table>
РЕЗУЛЬТАТ:
символ |
html-код |
десятичный код |
неразрывный пробел | |   |
пробел шириной в букву n |   |   |
пробел шириной в букву m |   |   |
тире шириной в букву n | – | – |
тире шириной в букву m | — | — |
Однако, этот метод даст осечку, если среди ячеек таблицы присутствует атрибут 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üß 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>
Смотрите также: