CSS Level 1 Komma  nach oben

Das Komma (,) verbindet mehrere Elemente durch UND. Damit kann die gleiche Definition auf mehrere Elemente angewandt werden. Beispiel:

P, DIV { ... }
/*Alle Elemente P und DIV*/

H1, H2, H3, H4 { ... }
/*Alle Elemente H1, H2, H3 und H4*/ 

CSS Level 1 Punkt  nach oben

Der Punkt (.) verbindet jeweils Elementnamen und Klassenbezeichnung (class=""). Die entstehende Elementvariante bezeichnet alle Elemente, die den definierten Namen sowie die definierte Klassenbezeichnung enthalten. Beispiel:

P.Klassenbezeichnung { ... }
/*Alle Elemente P mit der Klassenbezeichnung 'Klassenbezeichnung'*/

TABLE.MeineTabelle { ... }
/*Alle Elemente Table mit der Klassenbezeichnung 'MeineTabelle'*/ 

CSS Level 1 Raute  nach oben

Die Raute (#) verbindet jeweils Elementnamen und ID (id=""). Die entstehende Elementvariante bezeichnet das Element, dass die definierte ID enthält. Beispiel:

P#ID { ... }
/*Das Element P mit der ID 'ID'*/

DIV#MeinDiv { ... }
/*Das Element DIV mit der ID 'MeinDiv'*/ 

CSS Level 1 Leerzeichen  nach oben

Das Leerzeichen (' ') verbindet zwei Elemente. Es bezeichnet dabei das zweite Element, wenn es im ersten enthalten ist. Beispiel:

P STRONG { ... }
/*Alle Elemente STRONG, wenn sie in einem Element P enthalten sind*/

DIV SPAN { ... }
/*Alle SPAN, wenn sie in einem DIV enthalten sind*/ 

CSS Level 2 Stern  nach oben

Der Stern (*) bedeutet, dass alle Elemente gemeint sind; bezeichnet also alle Elemente. Beispiel:

* { ... }
/*Alle Elemente*/

*.ABC
/*Alle Elemente mit dem Attribut class="ABC"*/ 

CSS Level 2 Größer-Als  nach oben

Das Größer-als-Zeichen (>) verbindet zwei Elemente. Es bezeichnet dabei das zweite Element, wenn es "Kind" des ersten Elements ist. Beispiel:

OL > LI { ... }
/*Alle Li, wenn sie "Kind(er)" von OL sind*/ 

CSS Level 2 Plus  nach oben

Das Plus (+) verbindet zwei Elemente. Es bezeichnet dabei das zweite Element, wenn es direkt dem ersten Element folgt (<p><em> ... </em> ... </p>). Beispiel:

P + EM { ... }
/*Alle EM, wenn sie direkt nach einem P folgen*/ 

CSS Level 2 Attribute  nach oben

Durch zwei eckige Klammern, die den Namen des Attributes einschließen ([ Attributname ]), wird das Element, mit dem in den Klammern definierten Attribut verknüpft. Es werden dabei jeweils alle Elemente angesprochen, die den selben Elementnamen tragen und das bezeichnete Attribut enthalten. Beispiel:

A[target] { ... }
/*Alle A, wenn sie ein Attribut namens target haben*/ 

CSS Level 2 Attribut-Wert-Kombination  nach oben

Durch zwei eckige Klammern, die den Namen des Attributes sowie den dazugehörigen Wert einschließen ([ Attributname =" Wert " ]), wird ein Element, mit der in den Klammern definierten Attribut-Wert-Kombination verknüpft. Es wird dabei jedes Element bezeichnet, das den selben Elementnamen trägt und die definierte Attribut-Wert-Kombination enthält. Beispiel:

A[target="_top"] { ... }
/*Alle A, wenn sie ein Attribut namens target und dem
  dazugehörigen Wert _top, also target="_top", haben*/ 

CSS Level 2 Attribut-Wert-Auswahl  nach oben

Durch zwei eckige Klammern, die den Namen des Attributes sowie dazugehörige Werte einschließen ([ Attributname ~=" Werte " ]), wird ein Element, mit der in den Klammern definierten Attribut-Werte-Kombination verknüpft. Dabei können mehrere Werte (durch Leertasten getrennt) notiert werden. Diese müssen durch ~= (statt nur =) mit dem Attributnamen verbunden werden. Es wird dabei jedes Element bezeichnet, das den selben Elementnamen trägt und das definierte Attribut mit einem der definierten Werte enthält. Beispiel:

A[target~="Frame1 Frame2 "] { ... }
/*Alle A, wenn sie ein Attribut namens target und 
  dem dazugehörigen Wert Frame1 ODER Frame2, also 
  target="Frame1" oder target="Frame2", haben*/

CSS Level 2 Länderdefinition  nach oben

Durch zwei eckige Klammern, die den Namen des Attributes sowie dazugehörige Werte einschließen ([ Attributname |=" Werte " ]), wird ein Element, mit der in den Klammern definierten Attribut-Werte-Kombination verknüpft. Dabei können mehrere Werte (durch Bindestriche getrennt) notiert werden. Diese müssen durch |= (statt nur =) mit dem Attributnamen verbunden werden. Dies ist dazu da, Sprachen, Dialekte, Länderbezeichnungen u.ä. definieren zu können (RFC 1766). Es wird dabei jedes Element bezeichnet, das den selben Elementnamen trägt und das definierte Attribut mit einem der definierten Werte enthält. Beispiel:

P[lang|="en-US"] { ... }
/*Alle P, wenn sie mit englischer oder US-amerikanischer 
  Sprache definiert sind.*/ 

Verknüpfung von Verknüpfungen  nach oben

Natürlich ist es auch möglich mehrere Elemente mit einander zu verknüpfen oder auch Verknüpfungen wieder (weiter) zu verknüpfen. Beispiel:

P EM.abc { ... }
/*Alle EM, wenn die innerhalb eines P liegen und der 
  Klasse abc entsprechen*/

P.abc EM.def { ... }
/*Alle EM der Klasse def die innerhalb eines P der Klasse 
  abc liegen*/ 

Beachten Sie dabei jedoch, dass nicht mehrere Element-Attribut-Verknüpfungen (Punkt, Raute sowie Attributverknüpfungen) aneinander gereiht werden dürfen. Hierbei sollten stattdessen weitere Definitionen vorgenommen werden. Beispiel:

/* statt: */
P.abc#def { ... }

/* ... besser: */
P.abc { ... }
P#def { ... }