CSS


Selektoren
Darstellung von Elementen und Attributen

(Materialsammlung)

Selektoren werden in CSS-Anweisungen eingesetzt, um bestimmte Aspekte von HTML-Elementen und Attributen in einer gewünschten Weise darzustellen. Dadurch werden Aspekte realisiert, die von der Standarddarstellung des Browsers abweichen.

Auf dieser Seite sammle ich Hinweise zum Einsatz von Selektoren mit einem Schwerpunkt auf Barrierefreiheit.

before und after

Mit den Pseudoelementen ::before und ::after kann Inhalt vor oder hinter einem HTML-Element hinzugefügt werden. Der zu ergänzende Inhalt wird mit der content -Anweisung realisiert.

Der folgende CSS-Code stellt Elementen mit der Klasse mobil ein Icon für Smart Phones voran. Das Icon wird als Unicode-Zeichen 📱 (📱) realisiert. Hinter dem Schrägstrich wird die Textalternative für Screen Reader angegeben. Mit dem Code können in einer zentralen CSS-Datei Mobiltelefonnummern konsistent mit einem Indikator versehen werden. 

.mobil::before {
  content: "\1F4F1" / "Mobil";
}
W3C | Selectors Level 3 # The ::before and ::after pseudo-elements
Empfehlungen des World Wide Web Consortium
W3C | Accessible Name and Description Computation 1.1
Unter der Bedingung F werden before und after als Teil des barrierefreien Namens erläutert.

empty

Mit der Pseudoklasse :empty können CSS-Anweisungen speziell für leere Elemente realisiert werden. Leer bedeutet dabei, dass sich in dem Element keine Kindelemente oder Zeichen befinden. Selbst enthaltene Leerzeichen oder Absatzumbrüche bewirken, dass Anweisungen unwirksam bleiben. Lediglich Kommentare werden als leer interpretiert.

Nach dem Vorschlag der CSS-Arbeitsgruppe für den Standard Selectors Level 4 (April 2026) sollten auch Leerzeichen und andere white-space-Zeichen durch eine empty-Anweisung berücksichtigt werden. Allerdings ist die Umsetzung durch Browser mit Stand 2026 noch nicht gewährleistet.

Folgende Überschriften der Ebene 2 gelten beispielsweise für :empty-Anweisungen als leer: 

  <h2></h2>
  <h2><!-- Kommentar --></h2>

Mit folgenden CSS-Anweisungen können diese leeren Überschriften aus dem Accessibility-Tree entfernt werden: 

h2:empty {
  display: none;
}

  • Leere Elemente sollten nicht generell verborgen werden. 

    :empty { … }
*:empty { … }

    Links und Schalter bestehen vielfach aus leeren Elementen mit Hintergrundgrafiken, deren Beschriftung lediglich mit einem Titelattribut oder einer ARIA-Anweisung realisiert ist (Social-Media-Links, Suchschalter, …).

  • Leere Überschriften werden vom Prüftool WAVE als Fehler identifiziert. Leider bleit die Fehlermeldung auch, wenn eine leere Überschrift mit der obigen Anweisung verborgen wird.

Links zu :empty

W3C | Selectors Level 3 # :empty pseudo-class
Empfehlungen des World Wide Web Consortium
MDN | :empty CSS pseudo-class
Erläuterungen und Praxisbeispiele aus dem Mozilla Developer Network.
Testdatei für empty
Labordatei zum Prüfen des Verhaltens im Browser, Screen Reader oder in Prüftools