В дополнение к css селекторам тегов, классов и идентификаторов нам доступны селекторы псевдоклассов, которые несут дополнительные возможности по выбору нужных элементов.
Список доступных псевдоклассов:
-
:root: позволяет выбрать корневой элемент веб-страницы, наверное наименее полезный селектор, так как на правильной веб-странице корневым элементом практически всегда является элемент <html>
-
:link: применяется к ссылкам и представляет ссылку в обычном состоянии, по которой еще не совершен переход
-
:visited: применяется к ссылкам и представляет ссылку, по которой пользователь уже переходил
-
:active: применяется к ссылкам и представляет ссылку в тот момент, когда пользователь осуществляет по ней переход
-
:hover: представляет элемент, на который пользователь навел указатель мыши. Применяется преимущественно к ссылкам, однако может также применяться и к другим элементам, например, к параграфам
-
:focus: представляет элемент, который получает фокус, то есть когда пользователь нажимает клавишу табуляции или нажимает кнопкой мыши на поле ввода (например, текстовое поле)
-
:not: позволяет исключить элементы из списка элементов, к которым применяется стиль
-
:lang: стилизует элементы на основании значения атрибута lang
-
:empty: выбирает элементы, которые не имеют вложенных элементов, то есть являются пустыми
При применении псевдоклассов перед ними всегда ставится двоеточие. Например, стилизуем ссылки, используя псевдоклассы:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоклассы в CSS3</title>
<style>
a:link {color:blue; text-decoration:none}
a:visited {color:pink; text-decoration:none}
a:hover {color:red; text-decoration:underline}
a:active {color:yellow; text-decoration:underline}
input:hover {border:2px solid red;}
</style>
</head>
<body>
<a href="/index.html">Учебник по CSS3</a>
<input type="text" />
</body>
</html>
Читать далее
Это интересно
0
|
|||
Последние откомментированные темы:
-
Обзор смартфона LG Optimus L9
(1)
hobert
,
01.03.2022
-
Антивирусные приложения Android для защиты устройства
(1)
Наталья_ласточка
,
27.02.2022
-
Как отключить уведомления от Сбербанк за 60 рублей через приложение Сбербанк онлайн и ещё 5 методов!
(1)
bbob
,
15.02.2022
-
Обходим блокировку сайтов.
(3)
Евгений_к
,
07.02.2022
20251118151601