Grundlegende CSS-Selektoren

Was ist ein Selektor?

Ein CSS-Selektor ist der erste Teil einer CSS-Regel. Es ist ein Muster aus Elementen und anderen Begriffen, das dem Browser angibt, auf welche HTML-Elemente die CSS-Eigenschaftswerte innerhalb der Regel angewendet werden sollen. Das oder die Elemente, die vom Selektor ausgewählt werden, werden als Subjekt des Selektors bezeichnet.

In früheren Artikeln haben Sie verschiedene Selektoren kennengelernt und erfahren, dass es Selektoren gibt, die das Dokument auf unterschiedliche Weise ansprechen; zum Beispiel durch Auswahl eines Elements wie h1 oder einer Klasse wie .special. Beginnen wir mit einer Wiederholung der Haupttypen, die Sie bereits kennengelernt haben.

Typselektoren

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

Versuchen Sie, das folgende Beispiel zu bearbeiten (klicken Sie auf "Play", um es im MDN-Playground zu öffnen), um eine CSS-Regel hinzuzufügen, die das <h1>-Element auswählt und dessen Farbe auf Blau ändert:

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

Klassenselektoren

Der groß- und kleinschreibungssensitive Klassenselektor beginnt mit einem Punkt (.). Er wählt alles im Dokument aus, auf das diese Klasse angewendet wurde. Im folgenden Live-Beispiel haben wir eine Klasse namens highlight erstellt und sie in mehreren Bereichen des Dokuments angewendet. Alle Elemente mit dieser Klasse 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;
}

Mit Klassenselektoren spielen

Versuchen Sie, das obige Beispiel (im MDN-Playground) zu bearbeiten, um die folgenden Änderungen vorzunehmen:

1. Bearbeiten Sie das HTML, um den Inhalt zu ändern, auf den die .highlight-Stile angewendet werden. Sie könnten zum Beispiel einige <span>-Elemente hinzufügen, um verschiedene Teile des bestehenden Inhalts zu umschließen und die highlight-Klasse auf sie anzuwenden, einige bestehende highlight-Klassen entfernen oder neuen Inhalt hinzufügen, auf den die highlight-Klasse angewendet wird.
2. Bearbeiten Sie das CSS, um die Deklarationen innerhalb der .highlight-Regel zu ändern, fügen Sie bei Bedarf neue hinzu und beachten Sie, wie dies das Styling aller Elemente beeinflusst, auf die die highlight-Klasse angewendet wird.
3. Erstellen Sie eine neue Klassenregel innerhalb des CSS mit anderen Deklarationen darin (zum Beispiel mit einem Selektor .highlight2), und versuchen Sie dann, diese auf einige Ihrer HTML-Elemente anzuwenden.

Klassen für bestimmte Elemente ansprechen

Sie können einen Selektor erstellen, der spezifische Elemente mit der angewendeten Klasse anvisiert. 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 gewünschte Element verwenden und die Klasse ohne Leerzeichen mit einem Punkt 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 Anwendungsbereich einer Regel. Die Regel wird nur auf diese spezielle Element- und Klassenkombination angewandt. Sie müssten einen weiteren Selektor hinzufügen, wenn Sie möchten, dass die Regel auf andere Elemente angewendet wird.

Ein Element anvisieren, wenn mehr als eine Klasse angewendet wurde

Sie können mehreren Klassen auf ein Element anwenden und sie individuell ansprechen oder das Element nur dann auswählen, wenn alle im Selektor vorhandenen Klassen vorhanden sind. Dies kann hilfreich sein, wenn Sie Komponenten aufbauen, die auf Ihrer Website in verschiedenen Weisen kombiniert werden können.

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

Wir können dem Browser sagen, dass wir das Element nur dann auswählen wollen, wenn zwei Klassen angewendet wurden, indem wir sie ohne Leerzeichen dazwischen aneinanderketten. Sie werden sehen, dass das letzte <div> keine Stylingen erhält, da es nur die danger-Klasse hat. Um Stile zu erhalten, benötigt es auch die notebox-Klasse.

<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 #666666;
  padding: 0.5em;
  margin: 0.5em;
}

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

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

ID-Selektoren

Der groß- und kleinschreibungssensitive ID-Selektor beginnt mit einem # statt einem Punkt, wird jedoch genauso verwendet wie ein Klassenselektor. Der Unterschied besteht darin, dass eine ID nur einmal pro Seite verwendet werden kann, und Elemente können nur einen einzigen id-Wert haben. Ein ID-Selektor wählt ein Element mit einer bestimmten id aus, und Sie können die ID mit einem Typselektor voranstellen, um das Element nur dann anzusprechen, wenn sowohl das Element als auch die ID übereinstimmen. Sie können beide Verwendungen im folgenden Beispiel sehen:

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

Mit ID-Selektoren spielen

Versuchen Sie, das obige Beispiel zu bearbeiten, um die folgenden Änderungen vorzunehmen:

1. Bearbeiten Sie das HTML, um die #one-Stile auf den ersten Absatz anstatt auf den zweiten anzuwenden.
2. Bearbeiten Sie das CSS, um die Deklarationen innerhalb der ID-Selektoren zu ändern und sehen Sie, wie dies das Aussehen des HTML verändert.

Selektorenlisten

Wenn Sie dieselben CSS-Stile auf mehrere Elemente anwenden möchten, können Sie einzelne Selektoren zu einer Selektorenliste kombinieren. Die Regel wird dann auf alle einzelnen Selektoren angewandt. Zum Beispiel, wenn ich das gleiche CSS für einen h1- und einen .special-Selektor habe, könnte ich dies als zwei separate Regeln schreiben.

h1 {
  color: blue;
}

.special {
  color: blue;
}

Ich könnte auch diese in eine Selektorenliste kombinieren, indem ich ein Komma dazwischen setze.

h1, .special {
  color: blue;
}

Leerzeichen sind vor oder nach dem Komma zulässig. Sie könnten auch die Selektoren lesbarer finden, wenn jeder auf einer neuen Zeile steht.

h1,
.special {
  color: blue;
}

Mit Selektorenlisten spielen

Versuchen Sie im folgenden Beispiel, die beiden Selektoren, die identische Deklarationen haben, zu kombinieren. Die visuelle Anzeige sollte danach die gleiche sein.

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

Ungültige Selektoren in Selektorenlisten

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 gestylt wird.

h1 {
  color: blue;
}

..special {
  color: blue;
}

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

h1, ..special {
  color: blue;
}

Der universelle Selektor

Der universelle Selektor wird durch ein Sternchen (*) angezeigt. Er wählt alles im Dokument aus. Wenn * durch einen Nachkommenkombinator gebunden wird, wählt er alles innerhalb eines Vorfahrenelements aus. Zum Beispiel wählt p * alle verschachtelten Elemente innerhalb des <p>-Elements.

Im folgenden Beispiel verwenden wir den universellen Selektor, um die Ränder bei allen Elementen zu entfernen. Anstatt das standardmäßige Styling des Browsers, das Überschriften und Absätze mit Rändern trennt, ist alles nah beieinander.

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

Ein solches Verhalten kann manchmal in "Reset-Stylesheets" beobachtet werden, die das gesamte Styling des Browsers entfernen. Da der universelle Selektor globale Änderungen vornimmt, verwenden wir ihn für sehr spezifische Situationen, wie die unten beschriebene.

Den universellen Selektor verwenden, um Ihre Selektoren lesbarer zu machen

Eine Verwendung des universellen Selektors besteht darin, Selektoren lesbarer und intuitiver zu machen. Wenn wir zum Beispiel alle Nachkommenelemente eines <article>-Elements auswählen wollten, die das erste Kind ihres Elternelements sind, einschließlich direkter Kinder, könnten wir die :first-child Pseudoklasse verwenden. Wir werden mehr darüber in Pseudoklassen und Pseudoelemente erfahren:

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

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

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

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

Beide sind gleichwertig, aber einige Leute finden die zweite Option einfacher zu lesen.

Zusammenfassung

In diesem Artikel haben wir CSS-Selektoren rekapituliert, die es Ihnen ermöglichen, bestimmte HTML-Elemente anzusprechen, indem wir Typen-, Klassen- und ID-Selektoren detaillierter betrachteten als zuvor. Im nächsten Artikel werden wir auf Attributselektoren eingehen.

Siehe auch

CSS-Klassen, Scrimba ^{MDN-Lernpartner}

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

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