Selektoren

CSS Podcast – 002: Selectors

Angenommen, Sie haben Text, der nur größer und rot dargestellt werden soll, wenn es sich um den ersten Absatz eines Artikels handelt. Wie machen Sie das?

<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 ein bestimmtes Element zu finden und eine CSS-Regel wie diese anzuwenden.

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

CSS bietet Ihnen viele Optionen, um Elemente auszuwählen und Regeln auf sie anzuwenden, von sehr einfach bis sehr komplex, um Situationen wie diese zu lösen.

Bestandteile einer CSS-Regel

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

In dieser CSS-Regel ist der selector .my-css-rule, der alle Elemente mit der Klasse my-css-rule auf der Seite findet. In den geschweiften Klammern befinden sich drei Deklarationen. Eine -Deklaration ist ein Eigenschafts-Wert-Paar, das Stile auf die mit den Selektoren übereinstimmenden Elemente anwendet. Eine CSS-Regel kann beliebig viele Deklarationen und Selektoren haben.

Einfache Selectors

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

Universalselektor

Ein Universalselektor – auch Platzhalter genannt – entspricht einem beliebigen Element.

* {
  color: hotpink;
}

Diese Regel bewirkt, dass jedes HTML-Element auf der Seite Hotpink-Text enthält.

Typauswahl

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

section {
  padding: 2em;
}

Diese Regel sorgt dafür, dass jedes <section>-Element auf allen Seiten 2em von padding hat.

Klassenauswahl

In einem HTML-Element können ein oder mehrere Elemente im class-Attribut definiert sein. Der Klassenselektor entspricht jedem Element, auf das diese Klasse angewendet wird.

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

Jedes Element, auf das die Klasse angewendet wurde, wird rot dargestellt:

.my-class {
  color: red;
}

Beachten Sie, dass . nur in CSS und nicht im HTML-Code vorhanden ist. Dies liegt daran, dass das Zeichen . die CSS-Sprache anweist, Klassenattributmitgliedern abzugleichen. Dies ist ein gängiges Muster in CSS, bei dem Selektortypen mit einem Sonderzeichen oder einer Reihe von Zeichen definiert werden.

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

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

Dies liegt daran, dass CSS nach einem class-Attribut sucht, das die definierte Klasse enthält und nicht genau mit dieser Klasse übereinstimmt.

ID-Auswahl

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 das HTML-Element mit dem id-Wert rad wie folgt blau umrandet:

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

Verwenden Sie ähnlich wie beim Klassenselektor . das Zeichen #, um CSS anzuweisen, nach einem Element zu suchen, das mit dem darauffolgenden id übereinstimmt.

Attributauswahl

Mit der Attributauswahl können Sie nach Elementen suchen, die ein bestimmtes HTML-Attribut oder einen bestimmten Wert für ein HTML-Attribut haben. Weisen Sie CSS an, nach Attributen zu suchen, indem Sie den Selektor in eckige Klammern ([ ]) setzen.

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

Dieses CSS sucht nach allen Elementen, die das Attribut data-type mit dem Wert primary haben. Beispiel:

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

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

[data-type] {
  color: red;
}

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

Beide <div>-Elemente haben einen roten Text.

Wenn Sie eine Attributauswahl verwenden möchten, bei der die Groß- und Kleinschreibung berücksichtigt wird, fügen Sie der Attributauswahl den Operator s hinzu.

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

Wenn also ein HTML-Element für data-type statt primary den Wert Primary hätte, wird kein roter Text angezeigt. Umgekehrt können Sie den Operator i verwenden, um die Groß- und Kleinschreibung zu berücksichtigen.

Neben den Operatoren für die Groß-/Kleinschreibung 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;
}

Gruppierungsauswahlen

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

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

In diesem Beispiel wird die Farbänderung auf <strong>- und <em>-Elemente ausgeweitet. Sie wird auch auf eine Klasse namens .my-class und ein Element mit einem lang-Attribut erweitert.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über einfache Selectors

* {}

div {}

Pseudoklassen und Pseudoelemente

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

Pseudoklassen

HTML-Elemente haben verschiedene Status, entweder weil mit ihnen interagiert wird oder weil eines ihrer untergeordneten Elemente einen bestimmten Status hat.

Beispielsweise kann der Nutzer die Maus über ein HTML-Element bewegen oder ein untergeordnetes Element. Verwenden Sie in diesen Situationen 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 handeln, als würden sie ein neues Element mit CSS einfügen. Pseudoelemente unterscheiden sich syntaktisch von Pseudoklassen, da wir statt eines einzelnen Doppelpunktes (:) einen doppelten Doppelpunkt (::) verwenden.

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

Wie in der Demo oben, in der Sie dem Label eines Links den Dateityp vorangestellt haben, können Sie das Pseudoelement ::before verwenden, um Inhalt am Anfang eines Elements einzufügen, oder das Pseudoelement ::after, um Inhalt am Ende eines Elements einzufügen.

Pseudoelemente sind jedoch nicht auf das Einfügen von Inhalten beschränkt. Sie können sie auch verwenden, um ein Targeting auf bestimmte Teile eines Elements vorzunehmen. Angenommen, Sie haben eine Liste. Mit ::marker können Sie die einzelnen Aufzählungspunkte (oder Zahlen) in der Liste gestalten

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

Sie können auch ::selection verwenden, um die von einem Nutzer hervorgehobenen Inhalte zu gestalten.

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

Weitere Informationen finden Sie im Modul zu Pseudoelementen.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Pseudo-Selektoren

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

Komplexe Selectors

Sie kennen bereits eine Vielzahl von Selektoren, manchmal benötigen Sie jedoch mit Ihrem CSS-Code eine genauere Steuerung. Hier kommen komplexe Selektoren ins Spiel.

An dieser Stelle ist zu beachten, dass die folgenden Selectors zwar mehr Leistung bringen, wir aber nur nach unten kaskadieren können, um untergeordnete Elemente auszuwählen. Das Targeting nach oben und die Auswahl eines übergeordneten Elements sind nicht möglich. Was eine Kaskade ist und wie sie funktioniert, erfahren Sie in einer späteren Lektion.

Kombinatoren

Ein Kombinator ist das, was sich zwischen zwei Selectors befindet. Wenn der Selektor beispielsweise p > strong lautet, ist der Kombinator das Zeichen >. Die Selektoren mit diesen Kombinatoren helfen Ihnen, Elemente basierend auf ihrer Position im Dokument auszuwählen.

Nachkommen-Kombinator

Um untergeordnete Kombinatoren zu verstehen, müssen Sie zuerst die übergeordneten und untergeordneten Elemente verstehen.

<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, dessen Inhalt fett formatiert wird. Da es sich innerhalb von <p> befindet, ist es ein untergeordnetes Element.

Ein untergeordneter Kombinator ermöglicht das Targeting auf ein untergeordnetes Element. Dabei 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. Dadurch werden sie rekursiv blau.

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

Im HTML-Bereich in dieser Demo sehen Sie, dass das .top-Element mehrere untergeordnete <div>-Elemente hat, die selbst wiederum <div>-untergeordnete Elemente haben.

Nächste gleichgeordnete Kombinatorin

Mit dem Zeichen + im Selektor können Sie nach einem Element suchen, das direkt auf ein anderes Element folgt.

Wenn Sie einen Abstand zwischen gestapelten Elementen hinzufügen möchten, verwenden Sie das nächste gleichgeordnete Kombinator-Element. Damit wird nur dann ein Leerzeichen gesetzt, wenn ein Element ein nächstes gleichgeordnetes Element 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 diese Regel möglicherweise zusätzlicher, unnötiger Platz entsteht, da Sie jedes untergeordnete Element von .top auswählen. Mit dem nächsten gleichgeordneten Kombinator in Kombination mit einem universellen Selektor können Sie nicht nur steuern, welche Elemente Platz erhalten, sondern auch beliebigen Elementen Raum zuweisen. Dies bietet Ihnen langfristig Flexibilität, unabhängig davon, welche HTML-Elemente in .top angezeigt werden.

Nachfolgender gleichgeordneter Kombinator

Ein nachfolgender Kombinator ist einem Selektor auf der nächsten gleichgeordneten Entität sehr ähnlich. Verwenden Sie jedoch anstelle des Zeichens + das Zeichen ~. Der Unterschied besteht darin, dass ein Element nur auf ein anderes Element mit demselben übergeordneten Element folgen muss, anstatt das nächste Element mit demselben übergeordneten Element zu sein.

Dieser nachfolgende Kombinator bietet etwas weniger Steifheit, was in Kontexten wie dem obigen Beispiel nützlich ist, wenn die Farbe eines benutzerdefinierten Schalters geändert wird, wenn das zugehörige Kästchen den Status :checked hat.

Untergeordneter Kombinator

Mit einem untergeordneten Kombinator (auch als direkten Nachfolger bezeichnet) können Sie die Rekursion mit Kombinatorenelektoren besser steuern. Mit dem Zeichen > beschränken Sie die Kombinationsauswahl so, dass sie nur für direkte untergeordnete Elemente gilt.

Sehen wir uns das Beispiel des vorherigen, nächsten gleichgeordneten Selektors an. Das Leerzeichen wird jedem nächsten gleichgeordneten Element hinzugefügt. Wenn eines dieser Elemente jedoch auch nächste gleichgeordnete Elemente als untergeordnete Elemente enthält, kann dies zu unerwünschten, zusätzlichen Abständen führen.

Um dieses Problem zu beheben, ändern Sie den nächsten gleichgeordneten Selektor in einen untergeordneten Kombinator: > * + *. Die Regel gilt jetzt nur für direkt untergeordnete Elemente von .top.

Zusammengesetzte Selektoren

Sie können Selectors kombinieren, um Spezifität und Lesbarkeit zu verbessern. Wenn Sie beispielsweise <a>-Elemente als Ziel verwenden möchten, die auch die Klasse .my-class haben, schreiben Sie Folgendes:

a.my-class {
  color: red;
}

Dadurch wird nicht auf alle Links eine rote Farbe angewendet, sondern die rote Farbe wird auch nur auf .my-class angewendet, if es sich in einem <a>-Element befindet. Weitere Informationen dazu finden Sie im Spezifitätsmodul.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über komplexe Selectors

section.awesome {
  border: 1px solid hotpink;
}

Ressourcen

• Referenz zu CSS-Selektoren
• Interaktives Selector-Spiel
• Referenz zu Pseudoklassen und Pseudoelementen
• Ein Tool, das CSS-Selektoren in englischsprachige Erklärungen übersetzt