Псевдоклассы CSS: последний элемент :last-child(), первый :first-child() и нумерованный :nth--child()

Как задать стили отдельному объекту веб-страницы? Общепринятый способ — назначить класс, идентификатор, или обратиться по тегу. Но такая верстка не всегда работает. Особенно когда дело касается вложенных меню, последних элементов списка, CSS-стилей активных или посещенных ссылок. Именно для таких случаев были созданы псевдоклассы. Это особый вид селекторов, которые берегут нервную систему разработчика и существенно упрощают верстку.

Синтаксис и правила использования псевдоклассов

Вам будет интересно:Как добавить с помощью свойств 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), который позволяет обращаться к дочерним элементам по порядковому номеру. Учиться будем на примере создания панели навигации по сайту:

Получилось простое меню с четырьмя ссылками белого цвета. С помощью псевдоклассов мы можем выборочно настраивать каждый пункт навигации, менять размер, или сделать их разноцветными. Например, чтобы указать в 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; }

Дословно запись выше указывает браузеру добавить ко всем ссылкам внутри навигации