Der eigene Onlineshop für Fotografen

Workshop HTML5 & CSS3 - Stephan Heller

Der Beitrag "Alle CSS3 Selektoren im Detail" besteht aus fünf Seiten

Einfachselektoren (Simple selectors) - Alle CSS3 Selektoren im Detail

Universalselektor (Universal selector)

* {
   ...
}

Steuert alle HTML-Elemente. So kann beispielsweise eine einheitliche Schriftfarbe oder Schriftgröße für die komplette HTML-Datei vergeben werden.

Elementselektor (Type selector)

h1 {
   ...
}

Über den Elementselektor werden HTML-Tags angesprochen, der Selektor greift den Namen des HTML-Elements auf.

Wird auch als Typselektor bezeichnet, was wörtlich genommen näher an der englischen Bezeichnung ist. Sowohl Elementselektor als auch Typselektor werden im Deutschen mehr oder weniger zu gleichen Anteilen verwendet.

ID-Selektor (ID selector)

#meine-id {
   ...
}

Ein ID-Selektor besteht immer aus einer # (Raute) und dem ID-Wert (auch ID-Name, Bezeichner oder kurz »ID«). Diese Bestandteile werden ohne Leerzeichen zusammen geschrieben. Der ID-Name wird im HTML im id-Attribut vergeben.

Steuert ausschließlich das HTML-Element mit der vergebenen id. Da es nur eine id pro HTML-Dokument geben darf, steuern Sie damit ein konkretes Element. In der Kombination mit anderen Selektoren können Sie über ID Selektoren bestimmte Seitenbereiche steuern. Im Workshopteil des Buches wird der ID-Selektor im Kapitel 5 eingeführt und ist im Kapitel 36.1.3 detailliert beschrieben.

Klassenselektor (Class selector)

.meine-klasse {
   ...
}

Ein Klassenselektor besteht immer aus einem . (Punkt) und dem Klassennamen (auch class-Wert, kurz auch »class« oder Klasse), die ohne Leerzeichen zusammen geschrieben werden. Der Klassenname wird im HTML-Attribut class vergeben. Steuert alle HTML-Elemente mit der entsprechenden Klasse.

p.meine-klasse {
   ...
}

Ein Klassenselektor ist grundsätzlich nicht mit einem bestimmten HTML-Element verknüpft, kann aber in der Kombination aus Elementselektor und Klassenselektor auf bestimmte HTML-Elemente beschränkt werden. Wichtig ist, dass dann HTML-Elementname und Klassenname mit dem . (Punkt) ohne Leerzeichen zusammen geschrieben werden. Ein Leerzeichen zwischen Elementselektor und Klassenselektor hingegen verknüpft die Selektoren nicht, sondern baut eine Kaskade auf, in der alle Klassen innerhalb des HTML-Elements gemeint wären.

Attributselektor (Attribute selector)

Attributselektoren »untersuchen« die Werte von HTML-Attributen. Dabei ist dies nicht auf die id-oder class-Attribute beschränkt, sondern kann alle HTML-Attribute aufgreifen.

Die Schreibweise ist für alle Attributselektoren gleich: Der Selektor wird von eckigen Klammern umschlossen, der HTML-Attributname steht am Anfang des Selektors, der Wert des Attributs steht am Ende in Anführungszeichen. Dazwischen steht ein = (Gleichzeichen), das in der Kombination mit einem andern Sonderzeichen eine bestimmte Bedingung festlegt. Für Programmierer aus anderen Bereichen sei hier das Schlagwort »regulärer Ausdruck« für den Aufbau der Syntax eingeworfen.

Attributselektor Beschreibung
[attr] Steuert Elemente mit dem angegebenen Attribut. Dabei spielt es keine Rolle, ob oder welchen Wert dieses hat.
[attr="value"] Steuert Elemente, deren Attribute genau und ausschließlich den angegebenen Wert haben.
[attr~="value"] Steuert Elemente, deren Attribute unter anderen exakt den angegeben Wert, auch wenn mehrere Werte für das Attribut gesetzt sind.
[attr^="value"] Steuert Elemente, deren Attributwerte mit der Zeichenkette des angegebenen Wertes anfangen.
[attr$="value"] Steuert Elemente, deren Attributwerte mit der Zeichenkette des angegebenen Wertes enden.
[attr*="value"] Steuert Elemente, bei denen die Zeichenkette des angegebenen Wertes im Attributwert vorkommt.
[attr|="value"]

Steuert Elemente, deren Werte des Attributs »attr« eine Reihe von mit Minuszeichen getrennten Segmenten hat, wovon das erste Segment »value« ist.

Bespiel:
Der Selektor [lang|="de"] würde jedes HTML-Element finden, das lang="de-DE" oder auch lang="de-CH" beinhalten würde

Dabei kann ein Attributselektor alleine stehen, kann aber mit anderen Selektoren kombiniert werden und begrenzt die Regel dann auf den definierten Bereich:

[title*="Achtung"] {
   ...
}
strong[title*="Achtung"] {
   ...
}
#inhalt [title*="Achtung"] {
   ...
}

Alle Regeln würden Elemente finden, die »Achtung« im title stehen haben, unabhängig davon, ob noch Text davor oder dahinter steht, das * »sucht« nach dem Vorkommen innerhalb einer Zeichenkette.

Die erste Regel mit dem Selektor [title*="Achtung"] würde alle HTML-Elemente des ganzen Dokuments steuern, die zweite mit strong[title*="Achtung"] nur jene, wo betreffendes title-Attribut in einem strong vergeben ist. Die dritte Regel mit dem Selektor #inhalt [title*="Achtung"] steuert nur die HTML-Elemente, die innerhalb des Bereichs mit der id="inhalt" zu finden sind (beachten Sie das Leerzeichen zwischen dem ID-Selektor #inhalt und dem Attributselektor).

Weitere Seiten des Beitrags "Alle CSS3 Selektoren im Detail":

Buchempfehlungen