Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

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"




« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru