Susedský selektor v CSS

Susedský selektor ~ umožňuje vybrať všetky prvky, ktoré sa nachádzajú za daným prvkom v rámci toho istého rodiča.

Syntax

cssselektor1 ~ selektor2 {
  
}

Príklad

Obráťme sa na všetky elementy p, ktoré sa nachádzajú za elementmi h2 a nastavme im červenú farbu textu:

html<div>
  <h2>text</h2>
  <p>
    +
  </p>
  <p>
    +
  </p>
  <p>
    +
  </p>
</div>
<p>
  -
</p>

cssh2 ~ p {
  color: red;
}

Результат:

Príklad

Obráťme sa na všetky elementy p, ktoré sa nachádzajú za elementmi s triedou .test, a nastavme im červenú farbu textu:

html<div>
  <p class="test">
    text
  </p>
  <p>
    +
  </p>
  <p>
    +
  </p>
</div>
<p>
  -
</p>

css.test ~ p {
  color: red;
}

Результат:

Príklad

Obráťme sa na všetky elementy s triedou .elem, ktoré sa nachádzajú za elementmi s triedou .test, a nastavme im červenú farbu textu:

html<div>
  <p class="test">
    text
  </p>
  <p class="elem">
    +
  </p>
  <p>
    -
  </p>
  <p class="elem">
    +
  </p>
</div>
<p>
  -
</p>

css.test ~ .elem {
  color: red;
}

Результат:

Pozri tiež