CSS - Селекторы отношений

На этом уроке мы познакомимся с селекторами отношений, которые используются для того чтобы выбрать элементы в зависимости от того как они связаны с другими элементами на веб-странице.

Каждый элемент на веб-странице может быть связан с другим элементом с помощью одного из следующих отношений:

  • родительский элемент, прямой предок - элемент который содержит один или несколько вложенных в него элементов. По отношению к этим вложенным в него элементам он является для них родителем;
  • дочерний элемент, прямой потомок, ребёнок, дитя - элемент, который вложен в родительский элемент и по отношению к нему является дочерним элементом, т.е. его ребёнком;
  • соседний элемент, сиблинг (брат или сестра) – элементы, у которых один общий родитель. Такие элементы по отношению друг к другу являются сиблингами (соседями).

Рассмотрим следующий пример:

<div>
  <h1></h1>
  <p>
    <strong></strong>
    <em></em>
  </p>
</div>

Данный код можно представить в виде следующей схемы:

Схема расположения элементов

В вышеприведённом примере выберем элемент p и рассмотрим, как он связан с другими элементами в коде:

  • Родительский элемент – div;
  • Соседний элемент – h1;
  • Прямые потомки, дети – элементы strong, em.

В этом селекторе элемент1 и элемент2 связаны между собой отношением "предок потомок". Т.е. он используется для выбора элементов2, которые расположены внутри элемента1 в HTML документе. Другими словами, он выбирает все элементы2, которые являются потомками элемента1.

Например выбрать и установит стиль каждому элементу p, который является потомком элемента div:

CSS:

div p {
  color:red;
}

HTML:

<body>
  <div>
    <p>Текст 1</p> <= Является прямым потомком элемента div
    <p>Текст 2</p> <= Является прямым потомком элемента div
  </div>
  <p>Текст 3</p>
  <div>
    <section>
      <p>Текст 4</p> <= Является потомком элемента div
      <div>Содержимое контейнера</div>
    </section>
    <p>текст 5</p> <= Является прямым потомком элемента div
  </div>
</body>

В этом селекторе элемент1 и элемент2 связаны между собой отношением "родитель > ребёнок". Т.е. он используется для выбора элементов2, которые являются детьми элемента1. Другими словами, он выбирает все элементы2, которые имеют в качестве непосредственного родителя элемент1.

Например выбрать и установит стиль каждому элементу p, у которого родитель является элементом div:

CSS:

div > p {
  color:red;
}

HTML:

<body>
  <div>
    <p>Текст 1</p> <= Является прямым потомком элемента div
    <p>Текст 2</p> <= Является прямым потомком элемента div
  </div>
  <p>Текст 3</p>
  <div>
    <section>
      <p>Текст 4</p>
      <div>Содержимое контейнера</div>
    </section>
    <p>текст 5</p> <= Является прямым потомком элемента div
  </div>
</body>

Селектор Элемент1 + Элемент2 предназначен для выбора элементов2, которые расположены сразу же после элемента1, и являются они по отношению друг к другу соседями. Другими словами, данный селектор используется для выбора элемента2, который расположен сразу же после элемента1, и при этом они должны иметь одного и того же родителя в HTML документе.

Например выбрать и установит стиль каждому элементу p, который расположен сразу же после элемента div. Причём выбрать нужно только те элементы p, которые находятся на том же уровне вложенности, что и элементы div, т.е. они должны являться по отношению друг к другу соседями:

CSS:

div + p {
  color:red;
}

HTML:

<body>
  <div>
    <p>Текст 1</p>
    <p>Текст 2</p>
  </div>
  <p>Текст 3</p> <= Данный элемент расположен сразу же после элемента div и у них общий родитель body, т.е. данные элементы по отношению друг к другу являются соседями
  <div>
    <section>
      <p>Текст 4</p>
      <div>Содержимое контейнера</div>
    </section>
    <p>текст 5</p> 
  </div>
</body>

Селектор Элемент1 ~ Элемент2 предназначен для выбора элементов2, которые расположены после элемента1, и являются они по отношению друг к другу соседями. Другими словами, данный селектор используется для выбора элементов2, которые расположены после элемента1, и при этом они должны иметь одного и того же родителя в HTML документе.

Например выбрать и установит стиль каждому элементу p, который расположен после элемента div. Причём выбрать нужно только те элементы p, которые находятся на том же уровне вложенности, что и элементы div, т.е. они должны являться по отношению друг к другу соседями:

CSS:

div ~ p {
  color:red;
}

HTML:

<body>
  <div>
    <p>Текст 1</p>
    <p>Текст 2</p>
  </div>
  <p>Текст 3-1</p> <= Данный элемент расположен после элемента div и он по отношению к div является соседом
  <p>Текст 3-2</p> <= Данный элемент расположен после элемента div и он по отношению к div является соседом
  <div>
    <section>
      <p>Текст 4</p>
      <div>Содержимое контейнера</div>
    </section>
    <p>текст 5</p> 
  </div>
</body>


   HTML и CSS 0    2282 +1

Комментарии (2)

  1. Евгений # 0
    Спасибо за статью.

    в тексте поправьте, пожалуйста:

    Является прымым потомком элемента div
    1. Александр Мальцев # 0
      Спасибо, Евгений.
      Поправил.

    Вы должны авторизоваться, чтобы оставлять комментарии.