CSS-Selektoren: Stil auf alle h1-Elemente innerhalb eines div anwenden

Eine grundlegende Technik beim Codieren eigener Designs mit CSS ist das Verstehen und Anwenden von CSS-Selektoren. In der von uns genannten Quizfrage lautet die korrekte Antwort dafür:

div > h1 {...}

Diese Syntax bedeutet, dass der CSS-Stil auf alle h1-Elemente angewendet wird, die direkte "Kinder" eines div-Elements sind. Die '>'-Adresse ist ein spezieller Selektor, der als "kind-Selektor" bekannt ist.

Eine praktische Anwendung könnte so aussehen:

<div>
  <h1>Diese Überschrift erhält den Stil</h1>
  <p>Ein Absatz ohne Stil.</p>
  <div>
    <h1>Diese Überschrift wird nicht gestylt</h1>
  </div>
</div>

div > h1 {
  color: blue;
}

In diesem Beispiel wird der Text in der ersten h1-Überschrift blau sein. Die Überschrift im inneren div wird jedoch nicht betroffen sein, da sie nicht ein direktes "Kind" des div-Elements ist.

Die anderen Auswahlmöglichkeiten im Quiz sind jedoch ebenfalls wichtige CSS-Selektoren, die wie folgt verwendet werden:

div + h1 {...}: Stile werden auf h1-Elemente angewendet, die direkt nach div-Elementen kommen.
div.h1 {...}: Stile werden auf div-Elemente mit der Klasse "h1" angewendet.
div, h1 {...}: Stile werden sowohl auf div-Elemente als auch auf h1-Elemente angewendet.

Best Practice in CSS ist es, immer dafür zu sorgen, dass Ihre Selektoren so spezifisch wie nötig sind, um ungewollte Stil-Überschreibungen zu vermeiden. Nur so haben Sie die volle Kontrolle über das Layout und Design Ihrer Webseiten.

CSS-Selektoren: Stil auf alle h1-Elemente innerhalb eines div anwenden

Related Questions