* {
...
}
Steuert alle HTML-Elemente. So kann beispielsweise eine einheitliche Schriftfarbe oder Schriftgröße für die komplette HTML-Datei vergeben werden.
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.
#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.
.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.
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: |
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":