Grundlegende CSS-Selektoren

Ein CSS-Selektor ist der erste Teil einer CSS-Regel. Er ist ein Muster von Elementen und anderen Begriffen, die dem Browser mitteilen, welche HTML-Elemente ausgewählt werden sollen, damit die CSS-Eigenschaften innerhalb der Regel auf sie angewendet werden. Das oder die Elemente, die durch den Selektor ausgewählt werden, werden als Subjekt des Selektors bezeichnet.

In früheren Artikeln haben Sie möglicherweise verschiedene Selektoren kennengelernt und erfahren, dass es Selektoren gibt, die das Dokument auf unterschiedliche Weise ansteuern — beispielsweise durch die Auswahl eines Elements wie h1 oder einer Klasse wie .special. Beginnen wir mit einer Wiederholung der wichtigsten, die Sie bereits gesehen haben.

Ein Typselektor wird manchmal als Tag-Namens-Selektor oder Elementselektor bezeichnet, weil er ein HTML-Tag/Element in Ihrem Dokument auswählt. Im folgenden Beispiel haben wir die Selektoren span, em und strong verwendet.

Versuchen Sie, eine CSS-Regel hinzuzufügen, um das <h1>-Element auszuwählen und seine Farbe auf Blau zu ändern:

<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;
}

Der klassenempfindliche Klassenselektor beginnt mit einem Punkt (.)-Zeichen. Er wählt alles im Dokument aus, dem diese Klasse zugewiesen wurde. Im folgenden Live-Beispiel haben wir eine Klasse namens highlight erstellt und sie an mehreren Stellen in meinem Dokument angewendet. Alle Elemente, die die Klasse zugewiesen haben, sind hervorgehoben.

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

<p class="highlight">
  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>

body {
  font-family: sans-serif;
}

.highlight {
  background-color: yellow;
}

Sie können einen Selektor erstellen, der bestimmte Elemente mit der zugewiesenen Klasse anpeilt. Im nächsten Beispiel werden wir ein <span> mit einer Klasse von highlight anders hervorheben als eine <h1>-Überschrift mit einer Klasse von highlight. Wir tun dies, indem wir den Typselektor für das Element, das wir anpeilen möchten, verwenden und die Klasse ohne Leerzeichen dazwischen anhängen.

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

<p class="highlight">
  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>

body {
  font-family: sans-serif;
}

span.highlight {
  background-color: yellow;
}

h1.highlight {
  background-color: pink;
}

Dieser Ansatz reduziert den Umfang einer Regel. Die Regel gilt nur in dieser spezifischen Element- und Klassenkombination. Sie müssten einen zusätzlichen Selektor hinzufügen, wenn Sie möchten, dass die Regel auch auf andere Elemente angewendet wird.

Sie können einem Element mehrere Klassen zuweisen und sie einzeln anpeilen oder nur das Element auswählen, wenn alle Klassen im Selektor vorhanden sind. Dies kann hilfreich sein, wenn Komponenten erstellt werden, die auf Ihrer Seite auf unterschiedliche Weise kombiniert werden können.

Im folgenden Beispiel haben wir ein <div>, das eine Notiz enthält. Der graue Rahmen wird angewendet, wenn die Box eine Klasse von notebox hat. Wenn es auch eine Klasse von warning oder danger hat, ändern wir die border-color.

Wir können dem Browser mitteilen, dass wir das Element nur dann ansprechen möchten, wenn ihm zwei Klassen zugewiesen sind, indem wir sie ohne Leerzeichen zwischen ihnen ketten. Sie werden sehen, dass das letzte <div> keine Stiländerung erhält, da es nur die Klasse danger hat; es benötigt auch notebox, damit etwas angewendet wird.

<div class="notebox">This is an informational note.</div>

<div class="notebox warning">This note shows a warning.</div>

<div class="notebox danger">This note shows danger!</div>

<div class="danger">
  This won't get styled — it also needs to have the notebox class
</div>

body {
  font-family: sans-serif;
}

.notebox {
  border: 4px solid #666;
  padding: 0.5em;
  margin: 0.5em;
}

.notebox.warning {
  border-color: orange;
  font-weight: bold;
}

.notebox.danger {
  border-color: red;
  font-weight: bold;
}

Der id-sensitieve ID-Selektor beginnt mit einem # statt mit einem Punkt-Zeichen, wird jedoch auf die gleiche Weise wie ein Klassenselektor verwendet. Der Unterschied besteht darin, dass eine ID nur einmal pro Seite verwendet werden kann und Elementen kann nur ein id-Wert zugewiesen werden. Er kann ein Element auswählen, das die id gesetzt hat, und Sie können der ID einen Typselektor voranstellen, um das Element nur dann zu benennen, wenn sowohl das Element als auch die ID übereinstimmen. In folgendem Beispiel sehen Sie beide Verwendungen:

<h1 id="heading">ID selector</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>

<p id="one">
  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>

body {
  font-family: sans-serif;
}

#one {
  background-color: yellow;
}

h1#heading {
  color: rebeccapurple;
}

Wenn Sie mehr als ein Element haben, das denselben CSS verwendet, können die einzelnen Selektoren in eine Selektorliste kombiniert werden, sodass die Regel auf alle einzelnen Selektoren angewendet wird. Zum Beispiel, wenn ich denselben 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 einer Selektorliste kombinieren, indem ich ein Komma dazwischen setze.

h1, .special {
  color: blue;
}

Leerzeichen sind vor oder nach dem Komma gültig. Sie können auch feststellen, dass die Selektoren besser lesbar sind, wenn jeder Selektor in einer neuen Zeile steht.

h1,
.special {
  color: blue;
}

Im folgenden Live-Beispiel versuchen Sie, die beiden Selektoren zu kombinieren, die identische Deklarationen haben. Die visuelle Darstellung sollte nach dem Kombinieren gleich bleiben.

<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 beliebiger Selektor syntaktisch ungültig ist.

Im folgenden Beispiel wird die ungültige Klassenselektorregel ignoriert, während das h1 trotzdem gestylt wird.

h1 {
  color: blue;
}

..special {
  color: blue;
}

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

h1, ..special {
  color: blue;
}

Der universelle Selektor wird durch ein Sternchen (*) angezeigt. Er wählt alles im Dokument aus. Wenn * mit einem Nachkommen-Kombinator verkettet wird, wählt er alles innerhalb dieses Eltern-Elements aus. Zum Beispiel wählt p * alle verschachtelten Elemente innerhalb des <p>-Elements aus.

Im folgenden Beispiel verwenden wir den universellen Selektor, um die Ränder aller Elemente zu entfernen. Anstelle des Standardstylings des Browsers, das Überschriften und Absätze mit Rändern auseinandersetzt, ist alles eng zusammen.

<h1>Universal selector</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>

body {
  font-family: sans-serif;
}

* {
  margin: 0;
}

Dieses Verhalten kann manchmal in "Reset-Stylesheets" gesehen werden, die das gesamte Browser-Styling entfernen. Da der universelle Selektor globale Änderungen vornimmt, verwenden wir ihn in sehr speziellen Situationen, wie der unten beschriebenen.

Eine Verwendung des universellen Selektors besteht darin, Selektoren einfacher lesbar und offensichtlicher zu machen, was sie tun. Zum Beispiel, wenn wir alle Nachkommenelemente eines <article>-Elements auswählen wollen, die das erste Kind ihres Elternteils sind, einschließlich direkter Kinder, und sie fett machen, könnten wir die :first-child-Pseudoklasse verwenden. Wir werden mehr darüber in der Lektion über Pseudoklassen und Pseudoelemente lernen:

article :first-child {
  font-weight: bold;
}

Dieser Selektor könnte jedoch mit article:first-child verwechselt werden, der jedes <article>-Element auswählt, das das erste Kind eines anderen Elements ist.

Um diese Verwirrung zu vermeiden, können wir den universellen Selektor zur :first-child-Pseudoklasse hinzufügen, damit deutlicher wird, was der Selektor tut. Er wählt jedes Element aus, das das erste Kind eines <article>-Elements ist, oder das erste Kind eines beliebigen Nachkommenelements von <article>:

article *:first-child {
  font-weight: bold;
}

Obwohl beide dasselbe tun, ist die Lesbarkeit erheblich verbessert.

In diesem Artikel haben wir CSS-Selektoren zusammengefasst, mit denen Sie bestimmte HTML-Elemente ansteuern können, und haben die Typ-, Klassen- und ID-Selektoren etwas eingehender betrachtet als zuvor. Im nächsten Artikel werden wir uns mit Attributselektoren befassen.

CSS-Klassen, Scrimba ^{MDN Curriculum Partner}

Eine interaktive Lektion, die einige Hinweise zu CSS-Klassen bietet.

• Zurück
• Übersicht: Grundlagen der CSS-Styling
• Weiter