Susedný selektor v CSS

Susedný selektor + umožňuje vybrať prvok podľa jeho suseda nad ním.

Syntax

cssselektor1 + selektor2 {
  
}

Príklad

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

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

cssh2 + p {
  color: red;
}

Результат:

Príklad

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

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

css.test + p {
  color: red;
}

Результат:

Príklad

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

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

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

Результат:

Pozri tiež