|
CSS Урок 22 Псевдо Классы
CSS псевдо-классы используются, чтобы добавить специальные эффекты к некоторым
селекторам.
СинтаксисСинтаксис псевдо-классов:
| selector:pseudo-class {property:value;} |
CSS классы также могут использоваться с псевдо-классами:
| selector.class:pseudo-class {property:value;} |
Псевдо-классы СсылокСсылки могут быть отображены различными способами в браузере с поддержкой CSS:
Пример
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Замечание: a:hover ДОЛЖНО идти после a:link и a:visited в CSS определении, чтобы эффект работал!!
Замечание: a:active ДОЛЖНО идти после a:hover в CSS определении, чтобы эффект работал!!
Замечание: Имена псевдо-классов не чувствительны к регистру.
Псевдо-классы и CSS КлассыПсевдо-классы могут сочетаться с CSS классами:
a.red:visited {color:#FF0000;}
<a class="red" href="css_syntax.php">CSS Синтаксис</a> |
Если ссылка в примере выше будет посещена, она будет отображаться красным цветом.
CSS - псевдо-класс :first-childПсевдо-класс :first-child сопоставляет указанный элемент с первым дочерним для другого элемента.
Замечание: Чтобы :first-child работал в IE8 и более ранних версиях,
<!DOCTYPE> должен быть объявлен.
Сопоставление с первым <p> элементомВ следующем примере, селектор сопоставляет любой <p> элемент с первым дочерним элементом любого другого элемента:
Примерp:first-child
{
color:blue;
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Сопоставление с первым <i> элементом во всех <p> элементахВ следующем примере селектор сопоставляет первый <i> элемент во всех <p> элементах:
Примерp > i:first-child
{
color:blue;
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Сопоставление всех <i> элементов во всех первых дочерних <p> элементахВ следующем примере селектор сопоставляет все <i> элементы в <p> элементах, которые являются первыми дочерними
в другом элементе:
Примерp:first-child i
{
color:blue;
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
CSS - Псевдо-класс :langПсевдо-класс :lang позволяет вам определить специальные правила для различных языков.
Замечание: IE8 поддерживает псевдо-класс :lang
только если <!DOCTYPE> указан.
В примере ниже класс :lang определяет маркировочные знаки цитаты для элементов q, у которых lang="no":
Примерq:lang(no)
{
quotes: "~" "~";
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
 |
Еще примеры |
Добавление различных стилей к гиперссылкам
Этот пример демонстрирует как добавить другие стили к гиперссылкам.
Использование :focus
Этот пример демонстрирует как использовать псевдо-класс :focus.
Все CSS Псевдо-Классы/Элементы
| Селектор |
Пример |
Описание примера |
| :link |
a:link |
Выбирает все непосещенные ссылки |
| :visited |
a:visited |
Выбирает все посещенные ссылки |
| :active |
a:active |
Активная ссылка (на которой нажата кнопка мыши) |
| :hover |
a:hover |
Ссылка, над которой находится указатель мыши |
| :focus |
input:focus |
Выбирает элемент input, который имеет фокус ввода |
| :first-letter |
p:first-letter |
Выбирает первую букву каждого элемента <p> |
| :first-line |
p:first-line |
Выбирает первую строку каждого элемента <p> |
| :first-child |
p:first-child |
Выбирает каждый элемент <p>, который является первым дочерним по отношению к своему родительскому элементу |
| :before |
p:before |
Вставить содержимое до каждого элемента <p> |
| :after |
p:after |
Вставить содержимое после каждого элемента <p> |
| :lang(language) |
p:lang(it) |
Выбирает каждый элемент <p> со значением атрибута lang, начинающимся
с "it" |
|
