Selektoren


Der Selektor bestimmt, welche Elemente der Seite verändert werden sollen. Selektor kommt von engl. "select", auswählen, es werden also Elemente ausgewählt.

Die Auswahl kann nach verschiedenen Kriterien geschehen, oder einer Kombination daraus:

Typ Beispiel eines Selektors
Elemente, die dieser auswählt
Erklärung
nach HTML-Tag

h1

<h1>...</h1>
Diese CSS-Regel verändert das Aussehen aller Überschriften 1. Ordnung.
nach Klasse

.wichtig

<div class="wichtig">...</div>
<p class="wichtig">...</p>
<b class="wichtig">...</b>
      
Die CSS-Regel betrifft alle Elemente, die das Attribut class="wichtig" besitzen, egal, welche Art von HTML-Tag es ist
nach ID

#hauptmenu

<div id="hauptmenu">...</div>

Die Regel betrifft das Element, welches mit der ID "hauptmenü" versehen ist.

Wie Klasse, aber ID's müssen auf der Seite eindeutig sein.

nach Pseudoklasse

:hover

<a href="...">...</a>

Wenn die Maus darüber ist

Die Regel wählt das Element aus, über dem gerade die Maus steht.

Eine Liste aller Pseudoklassen findest du in der SelfHTML.



Wichtig: Dies sind nur die gebräuchlichsten Selektoren. Es gibt noch deutlich mehr, diese sind u.a. in der Wikipedia gelistet.



Kombinieren von Selektoren


Es ist sowohl eine UND-Verknüpfung als auch eine ODER-Verknüpfung möglich.

Bei einer UND-Verknüpfung werden nur die Elemente ausgewählt, auf die alle Einzelselektoren zutreffen. Die verschiedenen Teile werden direkt aneinander gehängt:

a:hoverEin Link, über dem gerade die Maus steht
ul#navigationEine Liste (<ul>-Tag), mit der ID "navigation"
li.active:hoverEin Listenpunkt, der die Klasse "active" hat, und über dem die Maus steht

Bei der ODER-Verknüpfung werden mehrere Selektoren unabhängig voneinander ausgewertet. Sie werden durch Kommata getrennt:

selektor1, selektor2, ..., selektorN { regeln: ...; }

Die Regeln werden auf alle Elemente, auf die mindestens einer der Selektoren zutrifft.

/* Beispiel: */
h1, h2, h3, h4, h5 { font-family: "Courier New", monospace; }

Die Überschriften 1-5 werden in der Schrift Courier New dargestellt.

Kommentare