Информация об CSS

select.md

Виды селекторов отношений

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

Вложенные селекторы

Комбинатор выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
css

div p {
  color:red;
}

html

<div>
  <p>Текст 1 [color red]</p>
  <p>Текст 2 [color red]</p>
</div>
<p>Текст 3-1</p> 
<p>Текст 3-2</p>
<div>
  <section>
    <p>Текст 4 [color red]</p>
    <div>Содержимое контейнера</div>
  </section>
  <p>текст 5 [color red]</p> 
</div>

Дочерние селекторы

Комбинатор > выбирает элементы, которые являются дочерними непосредственно по отношению к указанному элементу.
css

div > p {
  color: red
}

html

<div>
  <p>Текст 1 [color red]</p>
  <p>Текст 2 [color red]</p>
</div>
<p>Текст 3-1</p> 
<p>Текст 3-2</p>
<div>
  <section>
    <p>Текст 4</p>
    <div>Содержимое контейнера</div>
  </section>
  <p>текст 5 [color red]</p> 
</div>

Соседние селекторы

Комбинатор + выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.
css

div + p {
  color: red
}

html

<div>
  <p>Текст 1</p>
  <p>Текст 2</p>
</div>
<p>Текст 3-1 [color red]</p> 
<p>Текст 3-2</p>
<div>
  <section>
    <p>Текст 4</p>
    <div>Содержимое контейнера</div>
  </section>
  <p>текст 5</p> 
</div>

Родственные селекторы

Комбинатор ~ выбирает элементы, которые находятся после указанного элемента, если у них общий родитель.
css

div ~ p {
  color: red
}

html

<div>
  <p>Текст 1</p>
  <p>Текст 2</p>
</div>
<p>Текст 3-1 [color red]</p> 
<p>Текст 3-2 [color red]</p>
<div>
  <section>
    <p>Текст 4</p>
    <div>Содержимое контейнера</div>
  </section>
  <p>текст 5</p> 
</div>