Savetheinternet.png

Die EU-Urheberrechtsreform wird das Internet, wie wir es kennen, grundlegend verändern – wenn sie denn in der finalen Abstimmung angenommen wird. Das können wir aber immer noch verhindern!

Weitere Informationen: https://juliareda.eu/2019/02/artikel-13-endgueltig/

CSS/Selektoren/Kombinator/Nachbarkombinator

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Werden zwei Selektoren durch den Kombinator + (Pluszzeichen) verbunden, z. B. E + F, so wird das Element F nur dann angesprochen, wenn es im Elementbaum direkt auf ein E-Element folgt, also der direkte Nachbar ist.

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
h1 + p { font-weight: bold }
p + p { font-style: italic }
<h1>Nachbarkombinator</h1>
<p>Erster Absatz.</p>
<p>Zweiter Absatz.</p>
<p>Dritter Absatz.</p>
<div>neutrales Element</div>
<p>Vierter Absatz</p>
In diesem Beispiel wird der erste Absatz mit fett formatierter Schrift dargestellt, denn es ist das einzige unmittelbare Nachbar-p-Element von h1.

Für den zweiten und dritten Absatz gilt: Sie sind Nachbar-p-Elemente je eines p-Elements. Sie werden also kursiv dargestellt.

Der vierte Absatz ist ein Nachbar eines neutralen div-Elements und wird nicht gestylt.
Beachten Sie: Eine Selektion des vorangehenden Elements ist nicht möglich, evtl. hilft hier die Pseudoklasse focus-within, die selektiert, wenn ein Kindelement oder Nachfahre den Fokus erhält.

Siehe auch[Bearbeiten]