Псевдоклассы описывают различные состояния элементов. Например, какой цвет будет у активной ссылки или при наведении. Чем псевдокласс отличается от обычного класса?

Как использовать псевдоклассы в CSS

Псевдоклассы описывают различные состояния элементов. Например, какой цвет будет у активной ссылки или при наведении. Чем псевдокласс отличается от обычного класса?

  1. названия псевдоклассов нам не нужно самим придумывать, их надо просто знать.
  2. имя псевдокласса добавляется через двоеточие к селектору, тогда как название обычного класса указывается внутри тега HTML разметки.

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


:hover – при наведении курсора
:link – не посещенная ссылка
:active – состояние при нажатой ссылке
:visited - посещенная ссылка

Идея состоит в том, что для каждого состояния ссылки, задаются свои CSS стили. Например, изменим цвет ссылки при наведении курсора, на красный.

a:hover {
    color: red;
}

Чаще всего верстальщики сталкиваются с псевдоклассами работающими с ссылками, потому и знают их лучше всех.

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

Однако больше всего псевдоклассов используется для работы с элементами формы, особенно для input.

:focus – меняет стиль для поля, получившего фокус (клик внутри поля).

По умолчанию браузер делает обводку внутри инпута, попадающего в фокус. Мы отменяем дефолтную обводку и устанавливаем свои стили.

input:focus {
    outline: none;
    border: 2px solid green;
}

:checked – применяется к checkbox и radio элементам формы, когда они находятся во включенном состоянии.

:empty – представляет пустой элемент, например

span:empty {
    background: blue;
    width: 30px;
    height: 30px;
    display: block;
}

:invalid – применяется к полям формы, когда вводимые пользователем данные не подходят под заданный тип (невалидные данные).

Например, в поле с типом данных tel, пользователь ввел имя и тогда это поле станет красным.

<input type="tel" required>

input:invalid {
    background: red;
}
:valid – если валидация была успешна, то цвет поля станет зеленым.

input:valid {
    background: green;
}

Псевдокласс first-child


:first-child – задает CSS стили первому дочернему элементу в группе элементов одного родителя.

<ul>
    <li>child 1</li>
    <li>child 2</li>
    <li>child 3</li>
    <li>child 4</li>
    <li>child 5</li>
</ul>

li:first-child {
    background: grey;
}

У первого элемента списка появился серый фон.

:last-child – задает CSS стили последнему дочернему элементу в группе элементов одного родителя.

li:last-child {
    background: orange;
}

У последнего элемента списка появился оранжевый фон.

Псевдокласс nth-child

Для примера возьмем все тот же список. Как быть, если нужно выбрать не первый и не последний элемент списка, а например второй? Так вот, псевдокласс nth-child позволяет обращаться к элементу через порядковый номер, расположения в HTML-разметке или через выражение.

Выбор через порядковый номер, начиная с 1-го.


// второй элемент белый
li:nth-child(2) {
    color: #fff;
}

// третий элемент черный
li:nth-child(3) {
    color: #000;
}

Через ключевые слова:

:even – выбирает все четные номера
:odd – выбирает все нечетные номера

.li:nth-child(even) {
    background: white;
}


li:nth-child(odd) {
    background: blue;
}

Через выражение:

n – это счетчик, который может увеличивается от 0 до количества дочерних элементов. Выражение позволяет делать более сложную выборку элементов.

:nth-child(3n) // каждый третий элемент (3, 6, 9)
:nth-child(3n+4) // каждый третий элемент, начиная с четвертого (4, 7, 10)

Специфичные псевдоклассы


target: - применяется к id, который указан в адресной строке браузера.

<div id="h1">Заголовок раздела</div>

h1:target {
    color: red;
    font-weight: 500;
}

Комбинирование псевдоклассов

Можно на один селектор навесить несколько псевдоклассов, при этом порядок не важен. Однако в одной комбинации нельзя использовать взаимоисключающие псевдоклассы.

При наведении курсора на последний дочерний элемент списка, сделаем текст зеленым.

li:last-child:hover{
    color:green;
}