Комбинатор — это то, что объясняет отношения между селекторами.
Селектор CSS может содержать более одного простого селектора. Между простым селекторы, мы можем включить комбинатор.
В CSS есть четыре разных комбинатора:
селектор потомков (пробел)
дочерний селектор (>)
селектор соседнего брата (+)
общий селектор родственного уровня (~)
Селектор потомков соответствует всем элементам, которые являются потомками указанного элемент.
В следующем примере выбираются все элементы <p> внутри элементов <div>:
div p {
background-color: yellow;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Descendant Selector</h2>
<p>The descendant selector matches all elements that are descendants of a specified element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section><p>Paragraph 3 in the div.</p></section>
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
Селектор дочерних элементов выбирает все элементы, которые являются дочерними элементами указанный элемент.
В следующем примере выбираются все элементы <p>, которые дети <div> элемент:
div > p {
background-color: yellow;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Child Selector</h2>
<p>The child selector (>) selects all elements that are the children of a specified element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section>
<!-- not Child but Descendant -->
<p>Paragraph 3 in the div (inside a section element).</p>
</section>
<p>Paragraph 4 in the div.</p>
</div>
<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>
</body>
</html>
Соседний одноуровневый селектор используется для выбора элемента, который непосредственно после другого конкретного элемента.
Однородные элементы должны иметь один и тот же родительский элемент, а «смежный» означает «немедленно следующий».
В следующем примере выбирается первый элемент <p>, который размещается сразу после элементов <div>:
div + p {
background-color: yellow;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Adjacent Sibling Selector</h2>
<p>The + selector is used to select an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div elements:</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>
<div>
<p>Paragraph 5 in the div.</p>
<p>Paragraph 6 in the div.</p>
</div>
<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>
</body>
</html>
Общий селектор родственного элемента выбирает все элементы, которые являются следующими одноуровневыми элементами указанного элемента.
В следующем примере выбираются все элементы <p>, которые являются следующими дочерними элементами <div>:
div ~ p {
background-color: yellow;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>General Sibling Selector</h2>
<p>The general sibling selector (~) selects all elements that are next siblings of a specified element.</p>
<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>
</body>
</html>
Пример :
div p
Пример описания:
Выбирает все элементы <p> внутри элементов <div>
Пример :
div > p
Пример описания:
Выбирает все элементы <p>, родительским элементом которых является элемент <div>.
Пример :
div + p
Пример описания:
Выбирает первый элемент <p>, расположенный сразу после элементов <div>.
Пример :
p ~ ul
Пример описания:
Выбирает каждый элемент <ul>, которому предшествует элемент <p>.