Псевдоселекторы в CSS
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, что такое селекторы потомков в CSS. В данной статье я бы хотел рассказать о том, что такое псевдоселекторы в CSS и как их использовать. Вообще, когда говорят о псевдоселекторах, то сразу, в качестве примера, приводят ссылки. У ссылок может быть 4 состояния:
1) Ссылка в обычном состоянии,
2) При наведении,
3) Уже посещенная ссылка,
4) При щелчке.
Вот как раз обработка всех таких состояний (на примере ссылок), называется псевдоселекторами в CSS. Давайте создадим простую html-страницу и разместим на ней 2 ссылки. Никаких стилей в файле style.css пока задавать не будем:
<html> <head> <meta charset="utf-8"/> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <a href="https://www.yandex.ru/">yandex</a> </br> <a href="http://www.google.ru/">google</a> </body> </html>
Браузер умеет сам, по умолчанию, обрабатывать ссылки (обычно это синий цвет, в разных браузерах ссылка может быть подчеркнутой). Давайте зададим стиль для ссылки в файле style.css:
a {
color:black; //сделать черной
text-decoration:none; //убрать подчеркивание
}
Сейчас мы увидим, что наша ссылка стала черного цвета. Если на неё навести или щелкнуть по ней, то она всё равно будет черного цвета. Давайте зададим стили для всех 4 её состояний. Начать нужно с обычного состояния ссылки. Делается это с помощью псевдоселектора link:
a:link {
color:black; //оставим также черной
text-decoration:underline; //сделаем подчеркивание
}
Сделаем ссылку красной при наведении (с помощью псевдоселектора hover):
a:hover {
color:red; //делаем красной
text-decoration:none; //убираем подчеркивание
}
Изменим цвет посещенной ссылки на желтый (с помощью псевдоселектора visited):
a:visited {
color: yellow;
}
Также изменим цвет ссылки на зеленый при щелчке по ней (с помощью псевдоселектора active):
a:active {
color:green;
}
Обязательно наберите данный пример, чтобы закрепить материал по различным состояниям ссылки, т.к. это используется абсолютно на любом сайте.
В данной статье вы узнали, что такое псевдоселекторы в CSS.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
