Selektoren

allgemeine Selektoren

allgemeine Selektoren beziehen sich auf alle Elemente eines bestimmten HTML-Typs

	p	{ ... }
	a	{ ... }
	img	{ ... }

Die erste Regel bezieht sich auf sämtliche Absätze <p>...</p>
Die zweite Regel bezieht sich auf alle Hyperlinks <a href="...">...</a>
Die dritte Regel bezieht sich auf alle Bilder <img src="...">

Für manche HTML-Elemente gibt es noch sogenannte Pseudoklassen. Z.B.:

	a:hover { ... }
	a:visited { ... }

Dies erlaubt es bestimmte Zustände näher zu bestimmen. "a:hover" gilt für Hyperlinks, während der Mauszeiger darüber bewegt wird.

Probieren Sie es aus und bewegen Sie die Maus über diesen Hyperlink

Mit "a:visited" werden Links bezeichnet, die schon einmal besucht wurden.

Klassenselektoren

Stile, die man immer wieder braucht, lassen sich in Stilklassen zusammenfassen und später beliebigen Elementen auf der Seite zuweisen.

Stilklassen bekommen einen willkürlich gewählten Namen (ohne Abstände) und werden im Stylesheet mit einem Punkt davor definiert.

	.wichtig { ... }
	.tipp { ... }

Im HTML-Code der Seite können solche Stilklassen über das HTML-Attribut "class" eingebunden werden.

    <p class="wichtig">ein ganz wichtiger Absatz !!</p>

Im CMS-System geschieht die Einbindung über das Kontextmenü _{(Kapitel Stilklassen)}

Elementselektoren

Über Elementselektoren wird ein ganz bestimmtes Element angesprochen. Diesem Element muss im HTML-Code das HTML-Attribut "id" zugewiesen werden. Dabei handelt es sich um einen willkürlichen Namen, der auf dieser Seite nur einmal vorkommen darf. Z.B.:

    <p id="ziel"> ... </p>

Im Stylesheet wird dieses Element über dessen Namen mit vorangestelltem # angesteuert.

	#ziel { ... }

zusammengesetzte Selektoren

Werden mehrere Selektoren mit Abstand getrennt hintereinander geschrieben, dann bezieht sich dies auf Elemente, die innerhalb eines anderen geschachtelt sind.

<p id="ziel">normaler Text ... <strong>fett gedruckt</strong> ... normaler Text</p>

Dieses Beispiel zeigt den HTML-Code eines Absatzes, in dem ein Teil fett gedruckt _{(HTML-Symbol "<strong>")} ist.

Befindet sich im Stylesheet ein Selektor, wie der Folgende:

	#ziel strong { ... }

dann bezieht sich dieser auf alle fett gedruckten Bereiche innerhalb des Absatzes "ziel"