css mit Adi Prinz

Erste, letzte und einzelne Elemente

:first-child und :last-child

Im folgenden Beispiel erhält das erste Listenelement eine grüne und das letzte Listenelement eine rote Markierung.

• Erstes Element
• Zweites Element
• Drittes Element
• Letztes Element

.pseudo-structural-list li:first-child {
  border-left-color: #198754;
}

.pseudo-structural-list li:last-child {
  border-left-color: #dc3545;
}
    

Der Selektor li:first-child trifft nur zu, wenn das li-Element tatsächlich das erste Kind seines Elternelements ist.

:only-child

:only-child wählt ein Element aus, wenn es keine Geschwisterelemente besitzt.

.pseudo-only-child-example p:only-child {
  border: 2px solid #6f42c1;
  background-color: #f5f0ff;
}
    

:first-of-type und :last-of-type

Diese Pseudoklassen berücksichtigen den Elementtyp. Im folgenden Bereich wird der erste und der letzte Absatz ausgewählt, obwohl vor dem ersten Absatz noch eine Überschrift steht.

.pseudo-type-example p:first-of-type {
  border-left-color: #198754;
}

.pseudo-type-example p:last-of-type {
  border-left-color: #dc3545;
}
    

Unterschied zwischen :first-child und :first-of-type

<div>
  <h4>Überschrift</h4>
  <p>Erster Absatz</p>
  <p>Zweiter Absatz</p>
</div>
    

In diesem HTML trifft p:first-child auf keinen Absatz zu, weil die Überschrift das erste Kind ist. p:first-of-type wählt dagegen den ersten Absatz aus.

:nth-child()

Mit :nth-child() werden Elemente anhand ihrer Position innerhalb einer Gruppe von Geschwisterelementen ausgewählt. Die Zählung beginnt bei 1.

Ein bestimmtes Element auswählen

1. Element 1
2. Element 2
3. Element 3
4. Element 4
5. Element 5
6. Element 6

.pseudo-nth-single li:nth-child(3) {
  background-color: #f5f0ff;
  border-left-color: #6f42c1;
}
    

Hier wird ausschließlich das dritte Listenelement ausgewählt.

Gerade und ungerade Elemente

1. Element 1
2. Element 2
3. Element 3
4. Element 4
5. Element 5
6. Element 6

.pseudo-nth-even li:nth-child(even) {
  background-color: #e7f1ff;
}
    

even wählt die geraden Positionen aus. odd würde die ungeraden Positionen auswählen.

Die Formel an + b

Für regelmäßige Abstände kann in :nth-child() die Formel an + b verwendet werden:

• a bestimmt den Abstand zwischen den Treffern.
• n erhält nacheinander die Werte 0, 1, 2, 3 und so weiter.
• b bestimmt den Ausgangspunkt.

Der Selektor :nth-child(3n + 1) ergibt folgende Positionen:

• für n = 0: 3 × 0 + 1 = 1
• für n = 1: 3 × 1 + 1 = 4
• für n = 2: 3 × 2 + 1 = 7

1. Element 1
2. Element 2
3. Element 3
4. Element 4
5. Element 5
6. Element 6
7. Element 7
8. Element 8
9. Element 9

.pseudo-nth-formula li:nth-child(3n + 1) {
  background-color: #fff3cd;
  border-left-color: #fd7e14;
}
    

Ausgewählt werden die Elemente an den Positionen 1, 4, 7 und so weiter.

Die ersten oder die folgenden Elemente auswählen

/* Die ersten drei Elemente */
li:nth-child(-n + 3) {
  font-weight: 700;
}

/* Alle Elemente ab dem vierten */
li:nth-child(n + 4) {
  color: #6f42c1;
}

/* Die Elemente 3 bis 6 */
li:nth-child(n + 3):nth-child(-n + 6) {
  background-color: #e7f1ff;
}
    

:nth-last-child()

:nth-last-child() funktioniert ähnlich wie :nth-child(). Die Elemente werden jedoch vom Ende der Geschwistergruppe aus gezählt.

1. Element 1
2. Element 2
3. Element 3
4. Element 4
5. Element 5
6. Element 6

.pseudo-nth-last li:nth-last-child(2) {
  background-color: #f5f0ff;
  border-left-color: #6f42c1;
}
    

Dieser Selektor wählt das vorletzte Element aus. Das letzte Element besitzt vom Ende aus die Position 1.

/* Die letzten drei Elemente */
li:nth-last-child(-n + 3) {
  font-weight: 700;
}
    

:nth-of-type() und :nth-last-of-type()

:nth-of-type() zählt nur Geschwisterelemente desselben Elementtyps. Andere Elementtypen werden bei der Zählung nicht berücksichtigt.

.pseudo-nth-type-example p:nth-of-type(2) {
  background-color: #f5f0ff;
  border-left-color: #6f42c1;
}
    

Ausgewählt wird der zweite Absatz. Die Überschrift und das div-Element werden bei der Zählung der Absätze nicht berücksichtigt.

Unterschied zwischen :nth-child() und :nth-of-type()

Wichtig: :nth-child() zählt grundsätzlich alle Geschwisterelemente. :nth-of-type() zählt dagegen nur Geschwister desselben Elementtyps.

:empty

Die Pseudoklasse :empty wählt Elemente aus, die keine untergeordneten Elemente und keinen Textinhalt besitzen.

.pseudo-empty-example p:empty {
  min-height: 3rem;
  border: 2px dashed #dc3545;
  background-color: #fff0f1;
}

.pseudo-empty-example p:empty::before {
  content: "Dieses Element ist leer";
  color: #dc3545;
}
    

Auch ein Leerzeichen oder ein Zeilenumbruch im Element kann verhindern, dass :empty zutrifft. Das Element sollte deshalb wirklich keinen Inhalt besitzen:

<p></p>
    

:not()

Die Pseudoklasse :not() wird auch als Negations-Pseudoklasse bezeichnet. Sie wählt Elemente aus, die nicht auf den Selektor innerhalb der runden Klammern passen.

Ein Element ausschließen

• HTML
• CSS
• JavaScript – aktuelle Auswahl
• PHP

.pseudo-not-example li:not(.current) {
  color: #6f42c1;
  background-color: #f5f0ff;
}
    

Alle Listenelemente werden ausgewählt, außer dem Element mit der Klasse .current.

Mehrere Selektoren ausschließen

Innerhalb von :not() können mehrere Selektoren durch Kommas getrennt angegeben werden.

.pseudo-card:not(.featured, .disabled) {
  border-color: #6f42c1;
  background-color: #f5f0ff;
}
    

Dieser Selektor wählt nur Karten aus, die weder die Klasse .featured noch die Klasse .disabled besitzen.

Praktisches Beispiel für Abstände

Ein häufig verwendetes Beispiel ist ein unterer Abstand für alle Elemente außer dem letzten.

.pseudo-not-example li:not(:last-child) {
  margin-bottom: 0.5rem;
}
    

Dafür könnte auch ein Geschwisterselektor oder die Eigenschaft gap verwendet werden. Bei Flexbox- und Grid-Layouts ist gap meistens die übersichtlichere Lösung.

Spezifität von :not()

:not() fügt selbst keine eigene Spezifität hinzu. Für die Berechnung wird der spezifischste Selektor innerhalb der Klammern berücksichtigt.

:is()

Mit :is() können mehrere alternative Selektoren zusammengefasst werden. Dadurch lassen sich lange Selektorlisten deutlich kürzer und übersichtlicher schreiben.

Selektorlisten vereinfachen

Ohne :is():

.content h2,
.content h3,
.content h4 {
  color: #6f42c1;
}
    

Mit :is():

.content :is(h2, h3, h4) {
  color: #6f42c1;
}
    

Beide Schreibweisen wählen die Überschriften h2, h3 und h4 innerhalb eines Elements mit der Klasse .content aus.

.pseudo-is-example :is(blockquote, .notice) {
  border-left: 6px solid #6f42c1;
  background-color: #f5f0ff;
}
    

Mehrere Bereiche zusammenfassen

:is(header, main, footer) a:hover {
  color: #dc3545;
}
    

Der Selektor wählt Links im Hoverzustand aus, wenn sie sich in einem header-, main- oder footer-Element befinden.

Spezifität von :is()

:is() besitzt nicht einfach die Spezifität des Selektors, der bei einem bestimmten Element tatsächlich passt. Entscheidend ist der spezifischste Selektor in der gesamten Selektorliste.

:is(p, .notice, #important) {
  color: #6f42c1;
}
    

Weil die Liste den ID-Selektor #important enthält, wird für :is() die Spezifität dieses ID-Selektors verwendet. Das gilt auch dann, wenn das ausgewählte Element nur auf p passt.

IDs sollten deshalb nicht unnötig in einer :is()-Liste mit einfachen Element- oder Klassenselektoren vermischt werden.

:where()

:where() funktioniert bei der Auswahl grundsätzlich wie :is(). Der entscheidende Unterschied liegt in der Spezifität.

.content :where(h2, h3, h4) {
  color: #6f42c1;
}
    

Die Selektoren in den Klammern erhöhen die Spezifität nicht. :where() besitzt unabhängig von seinem Inhalt immer die Spezifität 0-0-0.

Vergleich zwischen :is() und :where()

Leicht überschreibbare Grundstile

:where(.pseudo-where-example) a {
  color: #6f42c1;
}

.special-link {
  color: #dc3545;
}
    

Die Klasse .special-link kann den Grundstil problemlos überschreiben, weil der Selektor innerhalb von :where() die Spezifität nicht erhöht.

:where() eignet sich deshalb besonders für Grundstile, Komponentenbibliotheken und CSS-Regeln, die später einfach angepasst werden sollen.

:has()

Mit :has() kann ein Element anhand anderer Elemente in seiner Umgebung ausgewählt werden. Häufig wird damit ein Elternelement ausgewählt, wenn es ein bestimmtes untergeordnetes Element enthält.

Elternelement abhängig vom Inhalt auswählen

Karte ohne Bild

Diese Karte enthält ausschließlich Text.

Karte mit Bild

Diese Karte wird durch :has() hervorgehoben.

.pseudo-has-card:has(img) {
  border-color: #6f42c1;
  background-color: #f5f0ff;
}
    

Ausgewählt wird jede Karte, die mindestens ein img-Element enthält.

Formulargruppe mit ausgewähltem Eingabefeld

.pseudo-has-choice:has(input:checked) {
  border-color: #6f42c1;
  background-color: #f5f0ff;
  color: #6f42c1;
  font-weight: 700;
}
    

Hier wird das label-Element hervorgehoben, dessen Kontrollkästchen ausgewählt ist.

Formulargruppe abhängig von der Gültigkeit gestalten

.pseudo-has-field:has(input:invalid:not(:placeholder-shown)) {
  border-color: #dc3545;
  background-color: #fff0f1;
}

.pseudo-has-field:has(input:valid) {
  border-color: #198754;
}

.pseudo-has-field:not(
  :has(input:invalid:not(:placeholder-shown))
) .pseudo-has-message {
  display: none;
}
    

Dadurch wird nicht nur das Eingabefeld selbst, sondern die gesamte Formulargruppe abhängig von der Gültigkeit der Eingabe gestaltet.

Nachfolgende Geschwister prüfen

Der Inhalt von :has() muss nicht zwingend ein untergeordnetes Element beschreiben. Auch Geschwisterbeziehungen können geprüft werden.

.pseudo-has-headings h4:has(+ p) {
  margin-bottom: 0.25rem;
  color: #6f42c1;
}
    

Der Selektor wählt eine h4-Überschrift aus, wenn direkt danach ein Absatz folgt. Das Pluszeichen ist dabei der Selektor für unmittelbar benachbarte Geschwister.

Bereich mit mehreren möglichen Inhalten prüfen

article:has(img, video, iframe) {
  padding: 1rem;
  border: 2px solid #6f42c1;
}
    

Dieser Selektor wählt jedes article-Element aus, das mindestens ein Bild, ein Video oder einen eingebetteten Inhalt enthält.

Spezifität von :has()

Wie bei :is() und :not() wird für :has() die Spezifität des spezifischsten Selektors innerhalb der Klammern verwendet.

:has() ist besonders leistungsfähig. Sehr allgemeine und aufwendige Selektoren sollten dennoch gezielt eingesetzt werden, damit das Stylesheet verständlich und gut wartbar bleibt.

Funktionale Pseudoklassen im Vergleich

Vereinfacht ausgedrückt:

• :not() bedeutet: „außer diesen Elementen“.
• :is() bedeutet: „einer dieser Selektoren“.
• :where() bedeutet: „einer dieser Selektoren, aber ohne zusätzliche Spezifität“.
• :has() bedeutet: „wenn ein passendes Element vorhanden ist“.