CSS-комбинаторы


Оглавление

    Показать оглавление


CSS-комбинаторы

Комбинатор — это то, что объясняет отношения между селекторами.

Селектор 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 (&gt;) 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>




Все селекторы CSS-комбинаторов

element element

Пример :

div p

Пример описания:

Выбирает все элементы <p> внутри элементов <div>

element>element

Пример :

div > p	

Пример описания:

Выбирает все элементы <p>, родительским элементом которых является элемент <div>.

element+element

Пример :

div + p	

Пример описания:

Выбирает первый элемент <p>, расположенный сразу после элементов <div>.

element1~element2

Пример :

p ~ ul	

Пример описания:

Выбирает каждый элемент <ul>, которому предшествует элемент <p>.