Псевдоклассы CSS: последний элемент :last-child(), первый :first-child() и нумерованный :nth--child()
Как задать стили отдельному объекту веб-страницы? Общепринятый способ — назначить класс, идентификатор, или обратиться по тегу. Но такая верстка не всегда работает. Особенно когда дело касается вложенных меню, последних элементов списка, CSS-стилей активных или посещенных ссылок. Именно для таких случаев были созданы псевдоклассы. Это особый вид селекторов, которые берегут нервную систему разработчика и существенно упрощают верстку.
Синтаксис и правила использования псевдоклассов
Отличительной чертой псевдоклассов является двоеточие. Именно этот знак отличает их от обычных селекторов. После двоеточия обязательно без пробела идет имя псевдокласса. В конце, если есть необходимость, в скобках указывается значение в виде целого числа, формулы или ключевого слова.
li:last-child{
padding-bottom: 0;
}
Иногда можно встретить двойное написание (::). Эта спецификация была добавлена в CSS3 для обращения к псевдоэлементам ::backdrop, ::before, ::after. Они отличаются тем, что добавляют стили объектам, которых нет в дереве DOM. Например, заглавная буква или первая строка.
p::before{
content: '';
display: block;
width: 100%;
color: #222;
}
Все тридцать селекторов мы разбирать не будем, возьмем только те, что означают в CSS последний элемент (:last-child), первый (:first-child). А также рассмотрим специальный псевдокласс (:nth-child), который позволяет обращаться к дочерним элементам по порядковому номеру. Учиться будем на примере создания панели навигации по сайту:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
width: 100%;
padding: 0;
margin: 0;
background: #000;
}
nav{
display: flex;
justify-content: flex-end;
width: 100%;
margin: 0;
padding: 0;
background: rgba(255,255,255,.1);
}
nav a{
color: #fff;
text-decoration: none;
text-transform: uppercase;
font: bold 15px Arial, sans-serif;
padding: 1em;
}
</style>
</head>
<body>
<nav>
<a href="#">Домой</a>
<a href="#">Новости</a>
<a href="#">Услуги</a>
<a href="#">Блог</a>
</nav>
</body>
</html>
Получилось простое меню с четырьмя ссылками белого цвета. С помощью псевдоклассов мы можем выборочно настраивать каждый пункт навигации, менять размер, или сделать их разноцветными. Например, чтобы указать в CSS последний элемент красного цвета, а первый зеленого, нужен следующий код:
nav a:first-child{
color: green;
}
nav a:last-child{
color: red;
}Универсальный селектор :nth-child
Этот селектор относится к числу структурных псевдоклассов. С его помощью можно управлять объектами по их нумерации. Порядковое число указывается в скобках и начинается с единицы. Если нужен последний элемент в CSS, для этого используется запись:
/*добавит последнему элементу справа границу красного цвета*/
nav a:nth-child(-1){
border-right: 1px solid red;
}Помимо целочисельных значений :nth-child принимает в качестве значений ключевые слова:
- odd - нечетные элементы;
- even - четные.
Теперь чтобы добавить границу желтого цвета каждой второй ссылке в панели навигации, достаточно прописать:
nav a:nth-child(even){
border-bottom: 1px solid yellow;
}Комбинированное использование псевдоклассов
Каскадные таблицы стилей позволяют комбинировать в одном селекторе сразу несколько псевдоклассов. Такой подход может пригодиться, когда необходимо назначить определенные стили всем CSS элементам, кроме последнего.
nav a:not(:last-child){
padding-right: 10px;
}Дословно запись выше указывает браузеру добавить ко всем ссылкам <a> внутри навигации <nav> отступ справа, за исключением последнего элемента. CSS селектор :not означает "все кроме". В скобках указываются имена классов, идентификаторов, псевдо-элементов и названия тегов.
Теперь, зная о возможности комбинирования селекторов, добавим нашей панели навигации интерактивности. Для этого будем использовать псевдокласс состояния :hover, который добавляет нужные стили при наведении курсора мышки на объект.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
width: 100%;
padding: 0;
margin: 0;
background: #000;
}
nav{
display: flex;
justify-content: flex-end;
width: 100%;
margin: 0;
padding: 0;
background: rgba(255,255,255,.1);
overflow: hidden;
}
nav a{
color: #fff;
text-decoration: none;
text-transform: uppercase;
font: bold 15px Arial, sans-serif;
padding: 1em;
transition: all .5s ease-in-out;
}
nav a:not(:last-child){
padding-right: 2em;
}
nav a:hover{
border-bottom: 1px solid#D349CE;
transform: scale(1.03);
opacity: .8;
}
nav a:nth-child(2):hover{
border-color: #46C5CD;
}
nav a:nth-child(3):hover{
border-color: #3EDC79;
}
nav a:nth-child(-1):hover{
border-color: #f69;
}
</style>
</head>
<body>
<nav>
<a href="#">Домой</a>
<a href="#">Новости</a>
<a href="#">Услуги</a>
<a href="#">Блог</a>
</nav>
</body>
</html>
С помощью селектора nav a:hover, мы сделали так, чтобы внешний вид ссылок каждый раз менялся при наведении курсора. Так пользователю будет намного проще и интересней взаимодействовать с сайтом. Обратите внимание на запись nav a:nth-child(n). Благодаря ей у каждого пункта меню свой цвет подчеркивания в состоянии :hover.
Можно пойти дальше и добавить :focus и :active для элементов <a>, которые будут менять поведение ссылок во время нажатия. Или окрасить их в другой цвет и увеличить размер шрифта в активном состоянии. С помощью CSS-селекторов оживают даже статичные HTML-страницы и без намека на JavaScript.