Дмитрий Нечаев
Комбинированные селекторы в CSS; Полное руководство с примерами
25 июля 2024 г.Автор
Селекторы в CSS позволяют выбирать элементы на странице для их стилизации. Помимо простых селекторов по тегу, классу или идентификатору, существуют комбинированные селекторы, которые дают возможность более точно и гибко выбирать элементы. В этой статье мы рассмотрим все доступные комбинированные селекторы в CSS и приведем примеры их использования.
Что такое комбинированные селекторы?
Комбинированные селекторы позволяют объединять несколько простых селекторов для более точного выбора элементов. Это может включать выбор элементов, которые имеют несколько классов, находятся в определённых отношениях друг с другом или имеют определённые атрибуты.
Виды комбинированных селекторов
Групповой селектор
Групповой селектор позволяет применить одни и те же стили к нескольким элементам. Селекторы разделяются запятой.
Пример:
h1, h2, h3 {
color: blue;
font-family: Arial, sans-serif;
}В этом примере заголовки <h1>, <h2> и <h3> будут иметь одинаковые стили.
Селектор потомка
Селектор потомка выбирает элементы, которые являются потомками другого элемента. Обозначается пробелом между селекторами.
Пример:
div p {
color: green;
}В этом примере все <p>, которые находятся внутри <div>, будут зелёного цвета.
Дочерний селектор
Дочерний селектор выбирает элементы, которые являются непосредственными потомками другого элемента. Обозначается символом >.
Пример:
ul > li {
list-style-type: none;
}В этом примере все <li>, которые являются непосредственными потомками <ul>, будут без маркеров.
Соседний селектор
Соседний селектор выбирает элементы, которые непосредственно следуют за другим элементом. Обозначается символом +.
Пример:
h1 + p {
margin-top: 0;
}В этом примере <p>, который следует непосредственно за <h1>, будет без верхнего отступа.
Обобщенный соседний селектор
Обобщенный соседний селектор выбирает элементы, которые следуют за другим элементом, но не обязательно непосредственно. Обозначается символом ~.
Пример:
h1 ~ p {
color: red;
}В этом примере все <p>, которые следуют за <h1>, будут красного цвета.
Селекторы по атрибуту
Селекторы по атрибуту позволяют выбирать элементы на основе их атрибутов и значений.
Наличие атрибута
Пример:
input[required] {
border: 2px solid red;
}В этом примере все <input>, имеющие атрибут required, будут с красной границей.
Точное значение атрибута
Пример:
a[href="<https://example.com>"] {
color: green;
}В этом примере все ссылки (<a>), у которых атрибут href равен https://example.com, будут зелёного цвета.
Значение атрибута, начинающееся с определённой строки
Пример:
a[href^="https"] {
color: blue;
}В этом примере все ссылки, у которых атрибут href начинается с https, будут синего цвета.
Значение атрибута, заканчивающееся на определённую строку
Пример:
img[src$=".jpg"] {
border: 1px solid #ccc;
}В этом примере все изображения, у которых атрибут src заканчивается на .jpg, будут с серой границей.
Значение атрибута, содержащие определённую строку
Пример:
[class*="button"] {
padding: 10px;
background-color: blue;
color: white;
}В этом примере все элементы, у которых атрибут class содержит слово button, будут стилизованы как кнопки.
Селекторы классов и идентификаторов
Можно комбинировать селекторы классов и идентификаторов для более точного выбора элементов.
Пример:
#header .nav {
background-color: #333;
color: white;
}В этом примере все элементы с классом nav, находящиеся внутри элемента с id header, будут иметь тёмный фон и белый текст.
Псевдоклассы и псевдоэлементы
Псевдоклассы и псевдоэлементы позволяют выбирать элементы в определённых состояниях или части элементов.
Псевдоклассы
Пример:
a:hover {
text-decoration: underline;
}В этом примере все ссылки будут подчёркнуты при наведении на них курсора.
Псевдоэлементы
Пример:
p::first-line {
font-weight: bold;
}В этом примере первая строка каждого абзаца будет жирной.
Примеры использования комбинированных селекторов
Стилизация формы
Использование различных комбинированных селекторов для стилизации формы:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
form input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
}
form input[type="submit"] {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
form input[type="submit"]:hover {
background-color: darkblue;
}
</style>
<title>Стилизация формы</title>
</head>
<body>
<form>
<label for="name">Имя:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Отправить">
</form>
</body>
</html>Стилизация навигационного меню
Использование комбинированных селекторов для стилизации меню:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#navbar ul {
list-style-type: none;
padding: 0;
}
#navbar ul li {
display: inline;
margin-right: 10px;
}
#navbar ul li a {
text-decoration: none;
color: #333;
}
#navbar ul li a:hover {
text-decoration: underline;
}
</style>
<title>Стилизация меню</title>
</head>
<body>
<nav id="navbar">
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#about">О нас</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
</body>
</html>Заключение
Комбинированные селекторы в CSS предоставляют мощные средства для точного выбора и стилизации элементов на веб-странице. Понимание различных типов комбинированных селекторов и их правильное использование помогает разработчикам создавать более гибкие, адаптивные и поддерживаемые стили. Экспериментируйте с различными комбинациями селекторов и находите оптимальные решения для ваших проектов.
Карта развития разработчика
Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile