CSS-Selektoren

Ein CSS-Selektor ist der erste Teil einer CSS-Regel. Es ist ein Muster aus Elementen und anderen Begriffen, die dem Browser mitteilen, welche HTML-Elemente ausgewählt werden sollen, um die CSS-Eigenschaftswerte innerhalb der Regel auf sie anzuwenden. Das Element oder die Elemente, die durch den Selektor ausgewählt werden, werden als Subjekt des Selektors bezeichnet.

In anderen Artikeln sind Ihnen möglicherweise einige verschiedene Selektoren begegnet und Sie haben gelernt, dass es Selektoren gibt, die das Dokument auf unterschiedliche Weise ansprechen — zum Beispiel durch Auswahl eines Elements wie h1 oder einer Klasse wie .special.

In CSS sind Selektoren in der CSS-Selektoren-Spezifikation definiert; wie jede andere Komponente von CSS müssen sie in Browsern unterstützt werden, damit sie funktionieren. Die Mehrheit der Ihnen begegneten Selektoren sind in den Selektoren-Spezifikationen der Stufen 3 und 4 definiert, die beide ausgereifte Spezifikationen sind, sodass Sie hervorragende Unterstützung in Browsern für diese Selektoren finden werden.

Wenn Sie mehr als ein Element haben, das das gleiche CSS verwendet, können die einzelnen Selektoren zu einer Selektorliste kombiniert werden, sodass die Regel auf alle einzelnen Selektoren angewendet wird. Wenn ich zum Beispiel das gleiche CSS für ein h1 und auch eine Klasse von .special habe, könnte ich dies als zwei separate Regeln schreiben.

h1 {
  color: blue;
}

.special {
  color: blue;
}

Ich könnte diese auch in eine Selektorliste kombinieren, indem ich ein Komma zwischen ihnen einfüge.

h1, .special {
  color: blue;
}

Leerzeichen sind vor oder nach dem Komma zulässig. Sie finden die Selektoren möglicherweise auch leichter lesbar, wenn jeder in einer neuen Zeile steht.

h1,
.special {
  color: blue;
}

Versuchen Sie im Live-Beispiel unten, die beiden Selektoren zu kombinieren, die identische Deklarationen haben. Die visuelle Darstellung sollte die gleiche sein, nachdem sie kombiniert wurden.

<h1>Type selectors</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo melon azuki
  bean garlic.
</p>

<p>
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

<p>
  Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce
  kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
  purslane kale. Celery potato scallion desert raisin horseradish spinach
</p>

body {
  font-family: sans-serif;
}
span {
  background-color: yellow;
}

strong {
  color: rebeccapurple;
}

em {
  color: rebeccapurple;
}

Wenn Sie Selektoren auf diese Weise gruppieren, wird die gesamte Regel ignoriert, wenn ein Selektor syntaktisch ungültig ist.

Im folgenden Beispiel wird die Regel des ungültigen Klassenselektors ignoriert, während das h1 weiterhin gestaltet würde.

h1 {
  color: blue;
}

..special {
  color: blue;
}

Wenn jedoch kombiniert, wird weder das h1 noch die Klasse gestaltet, da die gesamte Regel als ungültig angesehen wird.

h1, ..special {
  color: blue;
}

Es gibt einige verschiedene Gruppierungen von Selektoren, und zu wissen, welchen Selektortyp Sie benötigen könnten, hilft Ihnen dabei, das richtige Werkzeug für die Aufgabe zu finden. In den Unterartikeln dieses Artikels werden wir uns die verschiedenen Gruppen von Selektoren genauer ansehen.

Typselektoren zielen auf ein HTML-Element ab, wie ein <h1>:

h1 {
}

Klassenselektoren zielen auf ein Element ab, das einen bestimmten Wert für sein class-Attribut hat:

.box {
}

ID-Selektoren zielen auf ein Element ab, das einen bestimmten Wert für sein id-Attribut hat:

#unique {
}

Diese Gruppe von Selektoren bietet Ihnen verschiedene Möglichkeiten, Elemente basierend auf dem Vorhandensein eines bestimmten Attributs an einem Element auszuwählen:

a[title] {
}

Oder sogar eine Auswahl basierend auf dem Vorhandensein eines Attributs mit einem bestimmten Wert zu treffen:

a[href="https://example.com"]
{
}

Diese Gruppe von Selektoren umfasst Pseudo-Klassen, die bestimmte Zustände eines Elements stylen. Die :hover-Pseudo-Klasse beispielsweise wählt ein Element nur aus, wenn es von der Mauszeiger überfahren wird:

a:hover {
}

Sie umfasst auch Pseudo-Elemente, die einen bestimmten Teil eines Elements und nicht das Element selbst auswählen. Zum Beispiel wählt ::first-line immer die erste Zeile des Textes innerhalb eines Elements aus (ein <p> im unten stehenden Fall), indem es so wirkt, als ob ein <span> um die erste formatierte Zeile gelegt und dann ausgewählt wird.

p::first-line {
}

Die letzte Gruppe von Selektoren kombiniert andere Selektoren, um Elemente innerhalb unserer Dokumente zu zielen. Das folgende Beispiel wählt Absätze aus, die direkte Kinder von <article>-Elementen sind, indem der Kind-Kombinator (>) verwendet wird:

article > p {
}

In diesem Artikel haben wir CSS-Selektoren vorgestellt, die es Ihnen ermöglichen, bestimmte HTML-Elemente zu zielen. Als nächstes werden wir uns Typ-, Klassen- und ID-Selektoren genauer ansehen.

Für eine vollständige Liste von Selektoren siehe unser CSS-Selektoren-Referenz.

• Übersicht: CSS-Bausteine
• Weiter