Selektoren

Wie können Sie Text so formatieren, dass er nur dann größer und rot ist, wenn es sich um den ersten Absatz eines Artikels handelt?

<article>
  <p>I want to be red and larger than the other text.</p>
  <p>I want to be normal sized and the default color.</p>
</article>

Sie verwenden einen CSS-Selektor, um dieses Element zu finden und eine CSS-Regel anzuwenden, z. B. so:

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

CSS bietet viele Optionen, um Elemente auszuwählen und Regeln auf sie anzuwenden. Diese Optionen reichen von sehr einfach bis sehr komplex und können bei der Lösung solcher Probleme helfen.

Bestandteile einer CSS-Regel

Um die Funktionsweise von Selektoren und ihre Rolle in CSS zu verstehen, ist es wichtig, die Bestandteile einer CSS-Regel zu kennen. Eine CSS-Regel ist ein Codeblock, der einen oder mehrere Selektoren und eine oder mehrere Deklarationen enthält.

Ein Bild einer CSS-Regel mit dem Selektor „.my-css-rule“.

In dieser CSS-Regel ist .my-css-rule der Selektor, mit dem alle Elemente mit der Klasse my-css-rule auf der Seite gefunden werden. Innerhalb der geschweiften Klammern befinden sich drei Deklarationen. Eine Deklaration ist ein Attribut- und Wertpaar, das Stile auf die Elemente anwendet, die mit den Selectoren übereinstimmen. Eine CSS-Regel kann beliebig viele Deklarationen und Auswählen enthalten.

Einfache Selektoren

Die einfachste Gruppe von Selektoren richtet sich auf HTML-Elemente sowie Klassen, IDs und andere Attribute, die einem HTML-Tag hinzugefügt werden können.

Universalauswahl

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Ein Universalselektor, auch als Platzhalter bezeichnet, passt zu jedem Element.

* {
  color: hotpink;
}

Durch diese Regel hat jedes HTML-Element auf der Seite hotpinkfarbenen Text.

Typauswahl

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Ein Typselektor stimmt direkt mit einem HTML-Element überein.

section {
  padding: 2em;
}

Durch diese Regel hat jedes <section>-Element auf allen Seiten 2em von padding.

Klassenauswahl

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Ein HTML-Element kann ein oder mehrere Elemente im class-Attribut haben. Der Klassenauswahl entspricht jedes Element, auf das diese Klasse angewendet wurde.

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

Alle Elemente, auf die die Klasse angewendet wird, werden rot eingefärbt:

.my-class {
  color: red;
}

Beachten Sie, dass . nur im CSS und nicht im HTML vorhanden ist. Das liegt daran, dass das Zeichen . die CSS-Sprache anweist, Mitglieder von Klassenattributen abzugleichen. Dies ist ein gängiges Muster in CSS, bei dem ein Sonderzeichen oder eine Gruppe von Zeichen verwendet wird, um Selektortypen zu definieren.

Ein HTML-Element mit der Klasse .my-class wird weiterhin mit der obigen CSS-Regel abgeglichen, auch wenn es mehrere andere Klassen hat, z. B.:

<div class="my-class another-class some-other-class"></div>

Das liegt daran, dass in CSS nach einem class-Attribut gesucht wird, das die definierte Klasse enthält, anstatt genau mit dieser Klasse übereinzustimmen.

ID-Auswahl

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Ein HTML-Element mit einem id-Attribut sollte das einzige Element auf einer Seite mit diesem ID-Wert sein. So wählen Sie Elemente mit einem ID-Selektor aus:

#rad {
  border: 1px solid blue;
}

Mit diesem CSS-Code wird dem HTML-Element mit der id rad ein blauer Rahmen zugewiesen:

<div id="rad"></div>

Ähnlich wie beim Klassenselektor . können Sie mit dem Zeichen # CSS anweisen, nach einem Element zu suchen, das mit dem nachfolgenden id übereinstimmt.

Attributauswahl

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.

Source

Mit dem Attribut-Selektor können Sie nach Elementen suchen, die ein bestimmtes HTML-Attribut haben oder einen bestimmten Wert für ein HTML-Attribut haben. Legen Sie fest, dass CSS nach Attributen suchen soll, indem Sie den Selektor in eckige Klammern ([ ]) setzen.

[data-type='primary'] {
  color: red;
}

Dieses CSS sucht nach allen Elementen mit dem Attribut data-type und dem Wert primary:

<div data-type="primary"></div>

Anstatt nach einem bestimmten Wert von data-type zu suchen, können Sie auch nach Elementen mit dem Attribut suchen, unabhängig von dessen Wert.

[data-type] {
  color: red;
}
<div data-type="primary"></div>
<div data-type="secondary"></div>

Der Text in beiden <div>-Elementen ist rot.

Sie können attributbezogene Selektoren verwenden, die zwischen Groß- und Kleinschreibung unterscheiden, indem Sie dem Attributselektor den Operator s hinzufügen.

[data-type='primary' s] {
  color: red;
}

Wenn ein HTML-Element also eine data-type von Primary anstelle von primary hat, wird der Text nicht rot dargestellt. Mit einem i-Operator können Sie das Gegenteil erreichen, also die Groß- und Kleinschreibung ignorieren.

Neben Fallsensitiven Operatoren haben Sie Zugriff auf Operatoren, die mit Teilen von Strings in Attributwerten übereinstimmen.

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}
In dieser Demo ruft der Operator „$“ in der Attributauswahl den Dateityp aus dem Attribut „href“ ab. So ist es möglich, dem Label basierend auf dieser Dateiendung ein Präfix mit einem Pseudo-Element hinzuzufügen.

Gruppierungsauswahlen

Ein Selektor muss nicht nur mit einem einzelnen Element übereinstimmen. Sie können mehrere Auswahlkriterien gruppieren, indem Sie sie durch Kommas trennen:

strong,
em,
.my-class,
[lang] {
  color: red;
}

In diesem Beispiel wird die Farbänderung sowohl auf <strong>- als auch auf <em>-Elemente angewendet. Außerdem wird es auf eine Klasse namens .my-class und ein Element mit dem Attribut lang angewendet.

Wissen testen

Ihr Wissen über einfache Auswahlen testen

* {}

Welche Art von einfacher Auswahl wird im obigen Snippet verwendet?

ID
Attribut
Klasse
Universal
div {}

Welche Art von einfacher Auswahl wird im obigen Snippet verwendet?

ID
Typ
Klasse
Attribut

Pseudoklassen und Pseudoelemente

CSS bietet nützliche Selektortypen, die sich auf einen bestimmten Plattformstatus konzentrieren, z. B. wenn der Mauszeiger auf einem Element ruht, auf Strukturen innerhalb eines Elements oder auf Teile eines Elements.

Pseudoklassen

HTML-Elemente können sich in verschiedenen Status befinden, entweder weil mit ihnen interagiert wird oder weil eines ihrer untergeordneten Elemente sich in einem bestimmten Status befindet.

Ein Nutzer könnte beispielsweise den Mauszeiger auf ein HTML-Element bewegen oder auf ein untergeordnetes Element. Verwenden Sie in diesen Fällen die Pseudoklasse :hover.

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

Weitere Informationen finden Sie im Modul zu Pseudoklassen.

Pseudoelement

Pseudoelemente unterscheiden sich von Pseudoklassen, da sie nicht auf den Plattformstatus reagieren, sondern so tun, als würden sie ein neues Element mit CSS einfügen. Pseudoelemente unterscheiden sich auch syntaktisch von Pseudoklassen, da anstelle eines einfachen Doppelpunkts (:) ein doppelter Doppelpunkt (::) verwendet wird.

.my-element::before {
  content: 'Prefix - ';
}

Wie in der Demo oben, in der Sie dem Label eines Links den Dateityp vorangestellt haben, können Sie mit dem Pseudo-Element ::before Inhalte am Anfang eines Elements oder mit dem Pseudo-Element ::after Inhalte am Ende eines Elements einfügen.

Pseudo-Elemente sind jedoch nicht nur zum Einfügen von Inhalten geeignet. Sie können sie auch verwenden, um Anzeigen auf bestimmte Teile eines Elements auszurichten. Angenommen, Sie haben eine Liste. Mit ::marker können Sie den Stil für jeden Aufzählungspunkt (oder jede Zahl) in der Liste festlegen.

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

Mit ::selection können Sie auch den Stil von Inhalten festlegen, die von einem Nutzer hervorgehoben wurden.

::selection {
  background: black;
  color: white;
}

Weitere Informationen finden Sie im Modul zu Pseudoelementen.

Wissen testen

Ihr Wissen zu Pseudo-Selektoren testen

Wie viele Doppelpunkte werden in Pseudo-Element-Selektoren verwendet?

::
:
:::
p:hover {
  background: white;
  color: black;
}

Welche Art von Pseudoauswahl wird im obigen Snippet verwendet?

Pseudoelement
Pseudoklasse

Komplexe Auswahl

Sie haben bereits eine große Auswahl an Auswahlmethoden kennengelernt. Manchmal benötigen Sie jedoch eine präzisere Steuerung mit Ihrem CSS. Hier kommen komplexe Auswahltools ins Spiel.

Die folgenden Auswahlmethoden bieten zwar mehr Möglichkeiten, wir können aber nur abwärts kaskadieren, also untergeordnete Elemente auswählen. Wir können nicht nach oben ausrichten und ein übergeordnetes Element auswählen. Was die Kaskade ist und wie sie funktioniert, erfahren Sie in einer späteren Lektion.

Kombinatoren

Ein Kombinator befindet sich zwischen zwei Selektoren. Wenn der Selektor beispielsweise p > strong ist, ist das Zeichen > der Kombinator. Mithilfe der Auswahltools, die diese Kombinatoren verwenden, können Sie Elemente anhand ihrer Position im Dokument auswählen.

Nachkommen-Kombinator

Um Abfolge-Kombinatoren zu verstehen, müssen Sie zuerst übergeordnete und untergeordnete Elemente kennen.

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>

Das übergeordnete Element ist das <p>, das Text enthält. Innerhalb dieses <p>-Elements befindet sich ein <strong>-Element, wodurch der Inhalt fett formatiert wird. Da es sich im <p> befindet, ist es ein untergeordnetes Element.

Mit einem Abfolge-Kombinator können wir ein untergeordnetes Element anvisieren. Hier wird ein Leerzeichen () verwendet, um den Browser anzuweisen, nach untergeordneten Elementen zu suchen:

p strong {
  color: blue;
}

Mit diesem Snippet werden alle <strong>-Elemente ausgewählt, die nur untergeordnete Elemente von <p>-Elementen sind. Sie werden rekursiv blau hervorgehoben.

Da der Abfolge-Kombinator rekursiv ist, wird das jedem untergeordneten Element hinzugefügte Padding angewendet, was zu einem versetzten Effekt führt.

Dieser Effekt wird im obigen Beispiel mithilfe des Kombinator-Sellektors .top div besser veranschaulicht. Mit dieser CSS-Regel wird diesen <div>-Elementen ein linker Abstand hinzugefügt. Da der Kombinator rekursiv ist, wird auf alle <div>-Elemente in .top dasselbe Padding angewendet.

Sehen Sie sich in dieser Demo den HTML-Bereich an. Das .top-Element hat mehrere <div>-untergeordnete Elemente, die wiederum <div>-untergeordnete Elemente haben.

Nächstes Geschwisterelement

Wenn Sie nach einem Element suchen möchten, das direkt auf ein anderes Element folgt, können Sie in Ihrem Selector das Zeichen + verwenden.

Wenn Sie zwischen gestapelten Elementen einen Abstand hinzufügen möchten, verwenden Sie den Kombinator „Nächstes Geschwisterelement“, um den Abstand nur hinzuzufügen, wenn ein Element ein nächstes Geschwisterelement eines untergeordneten Elements von .top ist.

Mit der folgenden Auswahl können Sie allen untergeordneten Elementen von .top einen Rand hinzufügen:

.top * {
  margin-top: 1em;
}

Das Problem dabei ist, dass durch die Auswahl aller untergeordneten Elemente von .top mit dieser Regel möglicherweise zusätzlicher, unnötiger Platz erzeugt wird. Mit dem next sibling-Kombinator in Kombination mit einem universellen Selector können Sie nicht nur festlegen, welche Elemente einen Abstand erhalten, sondern auch beliebige Elemente damit versehen. Das bietet dir langfristige Flexibilität, unabhängig davon, welche HTML-Elemente in .top angezeigt werden.

Kombinator für nachfolgende Geschwister

Ein nachfolgender Kombinator ähnelt sehr dem Selektor „Nächster Bruder“. Verwenden Sie jedoch anstelle des Zeichens + das Zeichen ~. Der Unterschied besteht darin, dass ein Element nur einem anderen Element mit demselben übergeordneten Element folgen muss, anstatt das nächste Element mit demselben übergeordneten Element zu sein.

Verwenden Sie einen nachfolgenden Selektor zusammen mit der Pseudoklasse „:checked“, um ein reines CSS-Schalterelement zu erstellen.

Dieser nachfolgende Kombinator ist etwas weniger starr. Das ist in Kontexten wie dem oben genannten Beispiel nützlich, in dem wir die Farbe eines benutzerdefinierten Schalters ändern, wenn das zugehörige Kästchen den Status :checked hat.

Untergeordneter Combinator

Mit einem untergeordneten Kombinator (auch als direkter Nachkomme bezeichnet) haben Sie mehr Kontrolle über die Rekursion, die mit Kombinatoren verbunden ist. Wenn Sie das Zeichen > verwenden, wird der Kombinator-Selektor nur auf direkte untergeordnete Elemente angewendet.

Denken Sie an das vorherige Beispiel für die Auswahl des nächsten oder vorherigen Geschwisterelements. Der Abstand wird jedem nächsten übergeordneten Element hinzugefügt. Wenn eines dieser Elemente jedoch auch nächste übergeordnete Elemente als untergeordnete Elemente hat, kann dies zu unerwünschten zusätzlichen Abständen führen.

Ändern Sie die Nächster-Nebenknoten-Auswahl, um ein untergeordnetes Element einzubinden: > * + *. Die Regel gilt jetzt nur für direkt untergeordnete Elemente von .top.

Zusammengesetzte Auswahl

Sie können Auswählte kombinieren, um die Spezifität und Lesbarkeit zu erhöhen. Wenn Sie beispielsweise <a>-Elemente mit der Klasse .my-class anvisieren möchten, geben Sie Folgendes ein:

a.my-class {
  color: red;
}

Dadurch wird nicht allen Links die Farbe Rot zugewiesen. Außerdem wird die Farbe Rot nur auf .my-class angewendet, if es sich um ein <a>-Element handelt. Weitere Informationen finden Sie im Modul zur Spezifität.

Wissen testen

Ihr Wissen zu komplexen Auswahlen testen

Welches der folgenden Symbole ist kein Auswahlkombinator?

.
*
>
÷
+
section.awesome {
  border: 1px solid hotpink;
}

Der obige Selektor ist ein Beispiel für…

Verbindungsauswahl
Terminator
Kombinator

Ressourcen