Псевдоклассы и псевдоэлементы в CSS

Псевдокласс – это одно из понятий CSS. Он отличается от обычного класса тем, что его действие не распространяется на весь текст, к которому данный стиль применяется. Оно распространяется лишь на часть текста и только в определенном состоянии.

Чтобы понять действие данного элемента, давайте разберем следующий пример. В этом примере при наведении на ссылку она меняет свой вид. Вот фрагмент кода в котором описан этот эффект:

1. a {text-decoration: none;}
2. a:hover {text-decoration: underline;}

Верхняя строчка описывает ссылку, точнее именно то, как она будет выглядеть на странице. В данном случае для ссылки запрещено нижнее подчеркивание. В нижней строке указано определение стиля для псевдокласса hover. Из описания видно, что при выделении она будет подчеркиваться снизу.

Вот другой пример, в котором рассматривается действие псевдоэлемента first-letter. Этот псевдоэлемент применим к любому блочному элементу и задает стиль отображения его первой буквы.

1. p:first-letter {font-size:200%; font-weight:bold; color:#ff0000;}

Из описания видно, что первая буква абзаца будет в два раза больше остального текста, выделена жирным и красного цвета.

К данному псевдоэлементу применимы только следующие свойства: свойства фона, свойства цвета, свойства шрифтов, свойства заполнителей свойства границ, text-decoration, vertical-align ( только если float присвоен параметр none), text-transform, line-height, float, text-shadow, clear.

Существует также псевдоэлемент first-line. Он задает стиль отображения его первой строки.

1. p:first-line {font-size:150%; color:#0000ff;}

Из приведенного выше фрагмента кода видно, что первая строка абзаца будет синего цвета и в полтора раза больше остального текста.

Отметим, что во всех примерах действие стиля распространяется только на определенное состояние либо фрагмент текста. В этом и заключается смысл псевдоклассов и псевдоэлементов.

Верстка
Подписаться на комментарии
Оставить комментарий
Поставить трекбек