Как использовать псевдоклассы в CSS
Псевдоклассы описывают различные состояния элементов. Например, какой цвет будет у активной ссылки или при наведении. Чем псевдокласс отличается от обычного класса?
- названия псевдоклассов нам не нужно самим придумывать, их надо просто знать.
- имя псевдокласса добавляется через двоеточие к селектору, тогда как название обычного класса указывается внутри тега 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></span>
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;
}
Не стоит изучать псевдоклассы просто по справочнику, в отрыве от реального макета. Только верстая макет, быстро придет понимание, где и какой использовать псевдокласс. Посмотрите, как верстают сайты профессионалы в этом видеокурсе.
-
Создано 04.10.2019 10:35:19
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.