Elemente mit angrenzendem Geschwister-Selektor positionieren

Das Navigieren in den Feinheiten von CSS-Selektoren kann entmutigend sein, insbesondere wenn Sie auf die Notwendigkeit stoßen, Elemente basierend darauf zu formatieren ihre Beziehung zu Geschwisterelementen. Geben Sie ein: den benachbarten Geschwisterselektor, ein unverzichtbares Werkzeug zur Feinabstimmung Ihrer CSS-Strategien.

Um sicherzustellen, dass jedes

-Tag, das auf ein

mit der Klasse „hc-reform“ folgt, „clear:both“ verwendet, Sie können den nebenstehenden Geschwisterselektor verwenden. Dieser durch das Zeichen gekennzeichnete Selektor zielt auf Geschwister ab, die unmittelbar auf ein bestimmtes Element folgen:

h1.hc-reform   p {
  clear:both;
}

Dieses Code-Snippet zielt effektiv nur auf die

-Tags ab, die direkt auf ein

mit der Klasse „hc-reform“ folgen. Indem Sie „clear:both“ für diese Absätze festlegen, verhindern Sie, dass sie schwebende Elemente umschließen, die möglicherweise durch

eingeführt wurden.

Es ist zu beachten, dass dieser Selektor in Internet Explorer 6 oder älter nicht unterstützt wird Berücksichtigen Sie daher die Browserkompatibilität, wenn Sie davon ausgehen, dass Benutzer mit diesen Browsern auf Ihre Website zugreifen.