Element-Selektoren

Element-Selektoren wählen das gleichnamige HTML-Element aus.

body {font-family: Verdana, Geneva, sans-serif; }
h2 { color: #09F;}
p { line-height: 1.5em; }

Element h2

Element p: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. 

Klassen-Selektoren

Klassenselektoren wählen das Element aus, das über das gleichnamige Klassen-Attribut verfügt.

body { font-family: Verdana, Geneva, sans-serif; }

p { line-height: 1.5em; }

.otto { color: #36F; }

.susi { color: #F30; }

Element h2 der Klasse otto

Element h2 der Klasse susi

Element p der Klasse otto: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Element p der Klasse susi: Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. 

Element p ohne Klassenzugehörigkeit: Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. 

ID-Selektoren

ID-Selektoren wählen das Element aus, das über die gleichnamige ID verfügt. Der Name eines ID-Selektors darf nur einmal pro HTML-Dokument verwendet werden.

#manni { color: #F00; }

#conni { color: #6C6; }

#pixi { color: #C3C; }

Element h2 der id manni

Element h2 der id conni

Element p der id pixi: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. 

Kombinatoren

Kombinatoren sind zusammengesetzte Selektoren. Sie gelten nurim Kontext eines übergeordneten Selektors.

h2 { color: #09F; }
article h2 { color: #F60; }


Element h2 außerhalb von Element article

Element h2 in Element article

Listenselektoren

Listenselektoren sind Aufzählungen von Selektoren, für die dieselben Regeln gelten.

h2, p { color: #09F; }


Überschrift h2

Element p: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. 

Der !important-Zusatz

Diese h2-Überschrift erhält die letzte Eigenschaftsdefinition.

Diese h3-Überschrift behält die erste Eigenschaftsdefinition.

Beachten Sie den Quelltext!

<style>

h2 {


background-color: #F60;


}


h2 {


background-color: #3F6;


}


h3 {


background-color: #F60 !important;


}


h3 {


background-color: #3F6;


}
</style>

Überschreiben, Neu-Definition

Regeln, die später definiert werden, überschreiben gleichnamige frühere Regeln. Eine Ausnahme bildet der !important-Zusatz.

Regeln des Browser-Stylesheets

werden überschrieben von (falls vorhanden)

color: black;

▼

den Regeln des ersten Benutzer-Stylesheets

Dessen Regeln werden überschrieben von (falls vorhanden)

color: red;

▼

den Regeln des zweiten Benutzer-Stylesheets

Dessen Regeln werden überschrieben von (falls vorhanden)

color:blue;

▼

den Regeln des dritten Benutzer-Stylesheets

usw. (falls vorhanden)

▼

Anzeige im Browserfenster

BLAU

Vererbung

Eigenschaften werden vom übergeordneten Element an das untergeordnete Element vererbt. Oder nicht.

Vererbbare Eigenschaften Zum Beispiel color	Nicht vererbbare Eigenschaften Zum Beispiel border
CSS div {color:blue;}	CSS div {border:3px solid red;}
HTML <div> <p>Die Farbe wurde vom übergeordneten Element (div) vererbt.</p> </div>	HTML <div> <p>Der Rahmen wurde nicht vererbt.</p> </div>
	CSS p {border:inherit;}
	CSS <div> <p>Der Rahmen wurde geerbt.</p> </div>

Reales Codebeispiel im Quelltext

Spezifizierung

Eigenschaften werden referenzierten (spezifizierten) Elementen direkt zugewiesen, Vererbungen werden überschrieben.

 

/* Universalselektor, gilt für alle Elemente (überschreibt entsprechende Eigenschaften im Browser-Stylesheet) */

* {color:blue;}

 

/* Element-Selektor gilt für alle h2-Elemente (überschreibt Universalselektor) */

h2 {color: red;}

 

/* Klassen-Selektor, gilt für alle Elemente der Klasse .farbe1 (überschreibt Element-Selektor) */

.farbe1 {color:lime;}

 

/* ID-Selektor, gilt für alle Elemente der ID .farbe2 (überschreibt Klassen-Selektor) */

#farbe2 {color:pink;}

 

/* Kombinator, gilt nur für die Elemente in den angegebenen DOM-Pfaden (überschreibt frühere Eigenschaften) */

section h2.farbe1 {color:darkblue;}

 

Beispiele

Überschrift h2

Überschrift h2 der Klasse .farbe1

Überschrift h2 der Klasse .farbe1 und der ID farbe2

Überschrift h2 der Klasse .farbe1 innerhalb eines section-Elements

 

 

Berechnung des Spezifitätswerts

Seitenbaum (Ausschnitt)

Berechnung

Das ist ein HTML-Element, es hat den Spezifitätswert 1 (Ergebnis: blau)

Das ist ein HTML-Element. Weil es zu einer Klasse gehört, erhält es den Spezifitätswert 10. Die Regeln der Klasse dominieren. (Ergebnis: orange)

Das ist ein HTML-Element (Spezifitätswert 1). Weil es auch zu einer Klasse gehört, erhält es zusätzlich den Spezifitätswert 10. Insgesamt also 11. (Ergebnis: lime)

Das ist ein HTML-Element. Weil es zu einer ID gehört, erhält es den Spezifitätswert 100. Die Regeln der ID dominieren. (Ergebnis: rot)

Das ist ein HTML-Element. Weil dazu ein style-Attribut gehört, erhält es den Spezifitätswert 1000. (Ergebnis: magenta)

Das ist ein HTML-Element. Da drei Elemente davor liegen, erhält es den Spezifitätswert 3. (Ergebnis: braun)

Für dieses Element ist keine Regel spezifiziert. Es vererben sich die Regeln aus den übergeordneten Elementen. Weil weder für div noch für section eine Regel spezifiziert wurde, gilt die Regel für body.