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

Как было сказано выше, CSS применяется к элементам HTML. Но есть несколько элементов, которых не существует в HTML, но они присутствуют на странице (первая буква слова и первая строка абзаца). Такие элементы и называют псевдоэлементами. Им можно задавать стиль, также как и элементам HTML.

К псевдоэлементам относят:
first-letter — задает стиль первой букве слова. Пусть на нашей html-странице есть какой-нибудь абзац:

Это текст параграфа, и первую букву мы выделили красным цветом.

Выделим первую букву параграфа красным цветом, для этого в таблице стилей напишем:

p:first-letter{
color:red;
}

Наша страница в браузере выглядит так:

first-line — задает стиль первой строке абзаца. Выделим первую строку нашего абзаца синим цветом. Для этого в таблице стилей напишем:

p:first-letter{
color:red;
}
p:first-line{
color:blue;
}

Теперь наша страница в браузере выглядит так:

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

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

В CSS существуют четыре псевдокласса, они позволяют работать со ссылками. Как вы знаете, у ссылок есть четыре состояния: простая, активная, посещенная и та, на которую наведен курсор. Состояние ссылок зависит от действия пользователя, и браузер, в зависимости от этих действий может применять разные стили. Для описания этих стилей и существуют псевдоклассы.

a:link — задает стиль обычной ссылки.

a:active — задает стиль активной ссылки.

a:visited — задает стиль посещенной ссылки.

a:hover — задает стиль ссылки, на которую наведен курсор.

Как вы помните по умолчанию ссылки синего цвета и подчеркнуты. Пусть на нашей html-странице есть ссылка:

ссылка

Сейчас она выглядит так:
ссылка
Давайте сделаем нашу ссылку зеленой и уберем подчеркивание:

a{
color:green;
text-decoration:none;
}

Забегая вперед, скажу, что свойство text-decoration отвечает как раз за подчеркивание, а его значение none указывает, что подчеркивать не надо.
ссылка
Теперь, давайте зададим стиль для ссылки, на которую наведен курсор. Пусть она становится красного цвета:

a{
color:green;
text-decoration:none;
}
a:hover{
color:red;
}

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

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