Здравствуйте! В дополнение к css селекторам тегов, классов и идентификаторов нам доступны селекторы псевдоклассов, которые несут дополнительные возможности по выбору нужных элементов.
Список доступных псевдоклассов:
При применении псевдоклассов перед ними всегда ставится двоеточие. Например, стилизуем ссылки, используя псевдоклассы:
<!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>
Селектор :not() позволяет выбрать все элементы кроме определенных, то есть исключить некоторые элементы из выбора.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селекторы в CSS3</title> <style> a:not(.blueLink) { color: red; } </style> </head> <body> <a>Первая ссылка</a><br/> <a class="blueLink">Вторая ссылка</a><br/> <a>Третья ссылка</a> </body> </html>
Селектор a:not(.blueLink) применяет стиль ко всем ссылкам за исключением тех, которые имеют класс «blueLink». В скобки псевдоклассу not передается селектор элементов, которые надо исключить.
Селектор :lang выбирает элементы на основании атрибута lang:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селекторы в CSS3</title> <style> :lang(ru) { color: red; } </style> </head> <body> <form> <p lang="ru-RU">Я изучаю CSS3</p> <p lang="en-US">I study CSS3</p> <p lang="de-DE">Ich lerne CSS3</p> </form> </body> </html>
Об авторе