Псевдо-класс CSS: последний элемент :last-child(), первый :first-child() и пронумеровано :nth-ребенок()
Опубликованно 07.11.2018 09:15
Как установить стили в отдельный элемент веб-страницы? Распространенный способ, чтобы назначить класс, id, или обратитесь по тегам. Но такое наложение не всегда работает. Особенно, когда это подменю, последние элементы списка, CSS-стили, активные или ссылки, которые вы посещаете. Для таких случаев были созданы псевдоклассы. Это особый тип селекторов, которые защищают нервную систему разработки и упростить бюрократию.
Синтаксис и правила использования псевдоклассы
Отличительной чертой псевдоклассы-это кишки. Этот знак отличает их от обычных селекторов. После двоеточия, без того, чтобы обязательно пробел идет имя псевдокласса. В конце концов, если нужно, в скобках указано значение в виде целого числа, формулы или ключевые слова.
li:last-child{ padding-bottom: 0; }
Иногда можно встретить двойной записи (::). Эта спецификация была добавлена в CSS3, чтобы получить доступ в если вы хотите ::контекст ::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; фон: rgb(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="#">Home</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 принимает в качестве значений ключевые слова: нечетно - нечетных элементов; также четные числа.
Теперь, чтобы добавить рамку в желтый цвет каждой второй ссылке на панели навигации, достаточно прописать:
nav a:nth-child(even){ border-bottom: 1px solid yellow; } Комбинированное использование псевдоклассы
Таблицы стилей позволяют объединить в одном селекторе сразу несколько псевдо-классы. Этот подход может быть полезным, когда требуется назначить определенные стили все элементы CSS, за исключением последнего.
nav a:not(:last-child){ padding-right: 10px; }
Цитирую запись из выше указывает браузеру, чтобы добавить все ссылки <a> внутри браузера <nav> отступ справа, за исключением последнего элемента. CSS selector :не означает "все, кроме". В скобках указаны названия классов, id, псевдо-элементы и имен тегов.
Теперь, зная о возможности комбинировать селекторы, добавляем нашу панель навигации, интерактивности. Для этого мы будем использовать псевдо-класса :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; фон: rgb(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="#">Home</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. Автор: Искать Ася 20 Сентября, 2018
Категория: Мобильная техника
