Selektoren Kombination

Das Element wird ausgewählt und bekommt die Eigenschaften.

p {...}

Werden 2 Elemente ohne Leerzeichen zusammengeschrieben, dann werden sie somit näher bestimmt. Z.B. p MIT der Klasse red. Nur diese bekommen die Eigenschaften.

p.red {...}

{...} Der Stern (*) wählt alle Elemente aus. Kann auf die Kinder-Elemente angewendet werden. Z.B. wähle alle Elemente im NAV aus.

nav * {...}

Wählt die mit dem Komma zusammengefassten Elemente aus. Alle bekommen gleichzeitig die bestimmten Eigenschaften.

h1, h2, h3 {...}

Wählt die entsprechenden Elemente aus, welche Kinder-Elemente des ersteren sind. Z.B. span die Kinder und Kindeskinder von h1 sind. Durch das Leerzeichen werden alle Kindeskinder mit ausgewählt.

h1 span {...}

Wählt die entsprechenden Elemente aus, welche direkte Kinder-Elemente des ersteren sind. Z.B. span die direkte Kinder von h1 sind. Durch das Größer als Zeichen ">" werden nur die direkten Kinder und nicht die Kindes-Kinder ausgewählt.

div>p {...}

Selektiert nur die Geschwister-Elemente die direkt nach dem ersteren kommen. Z.B. nur die p Elemente, welche direkt nach h1 kommen.

h1+p {...}

Wählt alle Geschwister-Elemente aus, welche folgen. Z.B. alle p die nach einem h1 kommen.

h1~p {...}

Beispiel

#a wird ausgewählt wenn es die Klasse menu hat und direktes Kind von #nav ist.

nav a.menu

Die ID button wird ausgewält wen sie die Klasse big und die Klasse red hat.

#button.big.red

Attribute Selektion

Wählt alle Elemente mit diesem Atrribut aus. Z.B. alle Elemente mit title.

[title]

Wählt alle Elemente mit diesem Atrribut und exakt diesem Wert aus. Z.B. alle Elemente mit title=Arnold: .

[title="Arnold"]

Die tilde (~) wählt alle Elemente mit diesem Atrribut aus, wenn sie im Titel den Wert haben. Dabei müssen die Wörter durch Leerraum getrennt sein. Z.B. alle Elemente bei denen im Titel das Wort Arnold vorkommt.

[title~="Arnold"]

Wählt alle Elemente aus die mit einem bestimmten Attribut und Wert beginnen. Der Wert kann außedem mit Bindestrich (-) weitere Inhalte haben. Z.B. mit dem titel Arnold.

[title|="Arnold"]

Wählt alle Elemente aus die mit einem bestimmten Attribut beginnen. Z.B. mit der ID "Table-":

[id^="Table-"]

Wählt alle Elemente aus, die auf ein bestimmtes Attribut enden. Z.B. hier alle CSS Klassen die auf retina enden:

[class$="retina"]

Wählt alle Elemente aus die einen bestimmten Wert enthalten. Z.B. alle Mail-Links die auf @absks.de verweisen:

[href*="@absks."]