Псевдоклассы 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.

Комментарии