5.1 Виды селекторов
Комбинированные селекторы в CSS позволяют выбирать элементы на основе их взаимного расположения в дереве DOM. Они обеспечивают более точное управление стилями, позволяя стилизовать элементы в зависимости от их контекста. В CSS существует несколько типов комбинированных селекторов: потомок, дочерний элемент, соседний смежный элемент и соседний элемент.
Виды комбинированных селекторов:
- Селектор потомка (Descendant Selector)
- Селектор дочернего элемента (Child Selector)
- Селектор соседнего смежного элемента (Adjacent Sibling Selector)
- Селектор общего соседа (General Sibling Selector)
5.2 Селектор потомка
Селектор потомка выбирает все элементы, которые являются потомками указанного элемента. Потомками считаются все элементы, находящиеся внутри указанного элемента на любом уровне вложенности (это могут быть не только дети, но и внуки и пра-пра-внуки).
Синтаксис:
родитель потомок {
свойство: значение;
свойство: значение;
}
Пример:
/* Выбирает все <p>, которые находятся внутри <div> */
div p {
color: blue;
}
<div>
<p>Этот абзац будет синим.</p>
<div>
<p>Этот абзац тоже будет синим, так как он потомок "div".</p>
</div>
</div>
<p>Этот абзац не будет синим.</p>
5.3 Селектор дочернего элемента
Селектор дочернего элемента выбирает только те элементы, которые являются непосредственными дочерними элементами указанного родителя.
Синтаксис:
родитель > дочерний {
свойство: значение;
свойство: значение;
}
Пример:
/* Выбирает только <p>, которые являются непосредственными дочерними элементами .container */
.container > p {
color: green;
}
<div class="container">
<p>Этот абзац будет зеленым.</p>
<div class="wrapper">
<p>Этот абзац не будет зеленым, так как он не непосредственный дочерний элемент .container.</p>
</div>
<p>Этот абзац будет зеленым.</p>
</div>
<p>Этот абзац не будет зеленым.</p>
5.4 Селектор соседнего смежного элемента
Селектор соседнего смежного элемента выбирает элемент, который непосредственно следует за указанным элементом и находится на одном уровне вложенности.
Синтаксис:
предыдущий + следующий {
свойство: значение;
свойство: значение;
}
/* Выбирает <p>, который непосредственно следует за <h1> */
h1 + p {
color: red;
}
<h1>Заголовок 1</h1>
<p>Этот абзац будет красным, так как он следует непосредственно за "h1".</p>
<p>Этот абзац не будет красным.</p>
5.5 Селектор общего соседа
Селектор общего соседа выбирает все элементы, которые следуют за указанным элементом и находятся на одном уровне вложенности.
Синтаксис:
предыдущий ~ следующий {
свойство: значение;
свойство: значение;
}
Пример:
/* Выбирает все <p>, которые следуют за <h1> на одном уровне вложенности */
h1 ~ p {
color: purple;
}
<h1>Заголовок 1</h1>
<p>Этот абзац будет фиолетовым.</p>
<p>Этот абзац тоже будет фиолетовым.</p>
<div>
<p>Этот абзац не будет фиолетовым, так как он на другом уровне вложенности.</p>
</div>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ