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

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

Список доступных псевдоклассов:

:root: позволяет выбрать корневой элемент веб-страницы, наверное наименее полезный селектор, так как на правильной веб-странице корневым элементом практически всегда является элемент <html>
:link: применяется к ссылкам и представляет ссылку в обычном состоянии, по которой еще не совершен переход
:visited: применяется к ссылкам и представляет ссылку, по которой пользователь уже переходил
:active: применяется к ссылкам и представляет ссылку в тот момент, когда пользователь осуществляет по ней переход
:hover: представляет элемент, на который пользователь навел указатель мыши. Применяется преимущественно к ссылкам, однако может также применяться и к другим элементам, например, к параграфам
:focus: представляет элемент, который получает фокус, то есть когда пользователь нажимает клавишу табуляции или нажимает кнопкой мыши на поле ввода (например, текстовое поле)
:not: позволяет исключить элементы из списка элементов, к которым применяется стиль
:lang: стилизует элементы на основании значения атрибута lang
:empty: выбирает элементы, которые не имеют вложенных элементов, то есть являются пустыми

При применении псевдоклассов перед ними всегда ставится двоеточие. Например, стилизуем ссылки, используя псевдоклассы:

  
    <style>
   .content a:link    {color:blue; text-decoration:none}
   .content a:visited {color:pink; text-decoration:none}
   .content a:hover   {color:red; text-decoration:underline}
   .content a:active  {color:yellow; text-decoration:underline}
   .content input:hover {border:2px solid red;}
    </style>
 
    <a href="index.html">Учебник по CSS3</a>
    <input type="text" />

Учебник по CSS3

Селектор :not

Селектор :not() позволяет выбрать все элементы кроме определенных, то есть исключить некоторые элементы из выбора.

    <style>
    a:not(.blueLink) { color: red; }
    </style>
   
    <a>Первая ссылка</a><br/>
    <a class="blueLink">Вторая ссылка</a><br/>
    <a>Третья ссылка</a>

Первая ссылка
Вторая ссылка
Третья ссылка

Псевдокласс :lang

Селектор :lang выбирает элементы на основании атрибута lang:

    <style>
    :lang(ru) {
    color: red;
    }
    </style>

    <form>
    <p lang="ru-RU">Я изучаю CSS3</p>
    <p lang="en-US">I study CSS3</p>
    <p lang="de-DE">Ich lerne CSS3</p>
    </form>