CSS-Kurs / Kombinatoren und Pseudoklassen

Kombinatoren wählen Elemente basierend auf ihren Beziehungen in der HTML-Struktur aus, während Pseudoklassen Zustände oder strukturelle Bedingungen auswählen. Ein Kind-Selektor unterscheidet sich von einem Nachkommen-Selektor, und :first-child bezieht sich auf das erste Kindelement und nicht auf das erste Element eines bestimmten Typs.

Lesen Sie Eltern-, Kind-, Nachfahren- und Geschwisterbeziehungen

In der folgenden Struktur ist section das übergeordnete Element von h2, Absatz A, div und Absatz C. Absatz B ist ein Kind von div, das ein Nachkomme von section ist. A und C sind Geschwister, da sie dasselbe Elternelement haben, aber A und B sind keine Geschwister, da sie verschiedene Elternelemente haben. Die HTML-Struktur ist wichtiger als das Aussehen auf dem Bildschirm.

<section class="garden">
  <h2>Visitor Information</h2>
  <p>A: Operating hours</p>
  <div>
    <p>B: Greenhouse Guide</p>
  </div>
  <p>C: What you need</p>
</section>

section.garden
├─ h2
├─ p  ← A
├─ div
│  └─ p  ← B
└─ p  ← C

Ein Kombinator zielt normalerweise auf das Element rechts davon. h2 + p formatiert das p, das unmittelbar auf ein h2 folgt, als Geschwister. Leerraum-Textknoten durch Einrückung oder Zeilenumbrüche unterbrechen diese Geschwister-Element-Beziehung nicht. Weitere Details finden Sie unter Grundlegende CSS-Selektoren: Typ, Klasse, ID und Attribute.

Vergleichen Sie Nachkommen- und Kind-Selektoren

.garden p { color: #087f5b; }
.garden > p { border-left: 4px solid #087f5b; padding-left: 12px; }

Die erste Regel macht alle p in garden grün. Sie enthält B, selbst wenn dazwischen ein div ist. Die zweite Regel fügt nur den direkten Kindern A und C einen linken Rahmen und 12px linken Innenabstand hinzu. Da color und border-left verschiedene Eigenschaften sind, können A und C sowohl grün als auch einen Rand haben.

Ein Nachkommen-Selektor eignet sich für das einheitliche Styling von Absätzen in einem Abschnitt. Ein Direktkind-Selektor kann Absätze in verschachtelten Karten ausschließen. Strukturänderungen wirken sich auf diese Übereinstimmungen aus; vermeiden Sie die unnötige Verkettung von Kind-Kombinatoren, die das Stylesheet von einer starren Tiefe abhängig machen. Siehe MDN: Kombinatoren.

Vergleichen Sie die nächsten und die nachfolgenden Geschwister

h2 + p { background-color: #fff4cc; }
h2 ~ p { font-style: italic; }

Die erste Regel gibt Absatz A als unmittelbar folgendem Geschwisterelement der Überschrift einen gelben Hintergrund. Die zweite setzt A und C kursiv, weil beide nachfolgende p-Geschwister von h2 sind. B hat ein anderes Elternelement und wird deshalb nicht ausgewählt. Keiner der beiden Geschwisterkombinatoren wählt ein früheres Geschwisterelement aus.

Wenn Sie <div>Additional notice</div> zwischen h2 und A einfügen, verschwindet der gelbe Hintergrund, da A nicht mehr das unmittelbare Geschwister ist. Die Bedingung, dass es h2 innerhalb desselben Elternteils folgt, bleibt jedoch bestehen, sodass die Kursivschrift erhalten bleibt. Die Beobachtung dieses Unterschieds erspart Ihnen das Auswendiglernen von + und ~ als „ähnliche Selektoren“.

Wählen Sie Zustände und Positionen mit Pseudoklassen aus

a:hover { background-color: #fff4cc; }
a:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
.plants li:first-child { font-weight: bold; }
.plants li:nth-child(odd) { background-color: #e9f7ef; }

:hover wählt den Zustand aus, in dem sich der Mauszeiger über dem Element befindet. :focus-visible wählt den Zustand aus, in dem der Browser bestimmt, dass eine Fokusanzeige erforderlich ist, und ist nützlich, um zu überprüfen, welches Element beim Wechseln mit der Tab-Taste den Fokus erhält. :focus wählt den Fokuszustand selbst aus, sodass die Bedeutung der beiden nicht ganz gleich ist. Dieses Beispiel legt eine zusätzliche Kontur fest, ohne die standardmäßige Fokusanzeige zu entfernen. Sie können weiterhin üben, wie man Farbe und Fokus nach Zustand in einem tatsächlichen Link in Linkzustände und sichtbarer Tastaturfokus unterscheidet.

Wenn Sie den Mauszeiger über den Link bewegen, wird der Hintergrund gelb, und wenn Sie zum Link tabben, erscheint eine blaue Umrandung. In einer Touch-Umgebung kann nicht garantiert werden, dass der Benutzer den Hover-Effekt immer erlebt. Lassen Sie wichtige Informationen, wie Öffnungszeiten oder Linknamen, standardmäßig weiterhin lesbar.

:first-child wählt aus, ob es das erste Kindelement seines Elternteils ist. :nth-child(odd) wählt Fälle aus, in denen die Reihenfolge der Kindelemente ungerade ist, wie 1, 3 oder 5. Die obige Pflanzenliste enthält nur li, daher wird Minze Nummer 1 fett und erstellt einen Hintergrund für die Elemente 1 und 3. Wenn Sie stattdessen even anstelle von odd verwenden, sind die Zahlen 2 und 4 die Ziele.

p:first-child bedeutet „ein p-Element, das das erste Kind seines Elternteils ist“ und nicht „das erste p“. Das erste Kind von section in diesem Beispiel ist h2, daher passt .garden > p:first-child auf kein Paragraph-Element. nth-child zählt alle Geschwisterelemente, nicht nur Elemente mit demselben Tag. Verwenden Sie etwa nth-of-type, wenn nur Positionen innerhalb desselben Elementtyps zählen sollen. Die MDN Pseudoklassen-Referenz erklärt diese Zustands- und Positionsbedingungen.

Führen Sie das vollständige Beispiel aus

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    .garden p { color: #087f5b; }
    .garden > p { border-left: 4px solid #087f5b; padding-left: 12px; }
    h2 + p { background-color: #fff4cc; }
    h2 ~ p { font-style: italic; }
    .plants li:first-child { font-weight: bold; }
    .plants li:nth-child(odd) { background-color: #e9f7ef; }
    a:hover { background-color: #fff4cc; }
    a:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <section class="garden">
    <h2>Visitor Information</h2>
    <p>A: We open at 9am every day.</p>
    <div>
      <p>B: Please observe quietly in the greenhouse.</p>
    </div>
    <p>C: Bring a water bottle and comfortable shoes.</p>
  </section>
  <ul class="plants">
    <li>1: Mint</li>
    <li>2: Basil</li>
    <li>3: Rosemary</li>
    <li>4: Time</li>
  </ul>
  <a href="#contact">Go to the contact section</a>
  <h2 id="contact">Contact</h2>
  <p>Ask at the information desk.</p>
</body>
</html>

Wenn Sie speichern und ausführen, sind A·B·C grün, und nur A·C hat einen linken Rand. A hat einen gelben Hintergrund, und A·C hat kursiven Text. Die Pflanzenliste hat den ersten Eintrag fett und die ungeraden Einträge haben einen hellen Hintergrund. Überprüfen Sie die Links jeweils mit der Maus und der Tastatur. Die Buchstaben A~C vor den Absätzen sind Buchstaben, die direkt im Text geschrieben wurden, um die Auswahlergebnisse zu vergleichen.

Ändern Sie die Struktur und testen Sie jede Bedingung.

1. Fügen Sie ein div zwischen h2 und A ein. Überprüfen Sie, dass nur der Hintergrund von A verschwindet, während die Kursivschrift und die Ränder erhalten bleiben. Nach dem Üben löschen Sie das hinzugefügte div.
2. Machen Sie B zu einem direkten Kind von section, indem Sie das öffnende und das schließende div-Tag um Absatz B entfernen. Den p-Absatz selbst behalten Sie bei. Stellen Sie sicher, dass B ebenfalls einen linken Rahmen und Kursivschrift hat. Der Selektor h2 + p trifft weiterhin nur auf A zu. Nach der Bestätigung stellen Sie das div wieder her.
3. Ersetzen Sie :nth-child(odd) durch :nth-child(even). Überprüfen Sie, dass sich der Listenhintergrund von den Zahlen 1 und 3 auf die Zahlen 2 und 4 verschiebt und dass die fettgedruckten Buchstaben für first-child in Zahl 1 weiterhin erhalten bleiben.
4. Legen Sie die Maus weg, klicken Sie in die Seite und tabben Sie zum Link. Stellen Sie sicher, dass die Fokuslinie sichtbar ist und Sie mit Enter zum Kontaktbereich gelangen können. Wenn die Browser-Adressleiste den Fokus hat, kehrt sie zuerst zur Seite zurück.

Bitte prüfen Sie jede Bedingung separat. Nur den Farbwert zu ändern, um den Auswahlbereich zu erweitern, oder Hover zum Tastatur-Fokus-Problem hinzuzufügen, wird die Ursache nicht lösen. In den Entwicklertools können Sie mit der Möglichkeit vergleichen, den Zustand erzwingen zu lassen, aber letztendlich ist es besser, die für den Benutzer sichtbaren Ergebnisse durch tatsächliche Tabulatorbewegungen und Mausbewegungen zu überprüfen.