Der am häufigsten anzutreffende und einfachsten zu verstehende Selektor ist der sogenannte Typ-Selektor. Typ-Selektoren wählen jedes HTML-Element einer Seite aus, welches dem Selektor entspricht - unabhängig von der Position im Dokumentenbaum. Zum Beispiel:
em {color: blue; }
Diese Regel wählt alle <em>-Elemente der Seite aus und färbt sie blau. Wie man am unteren Dokumentendiagramm sehen kann, werden alle <em>-Elemente blau eingefärbt – egal wo sich diese im Dokumentenbaum befinden.
Es gibt eine Vielfalt von Elementen, die man mit Typ-Selektoren auswählen kann. Dies bedeutet, dass man das Aussehen jedes Elements einer Seite verändern kann, nur durch die Benutzung von Typ-Selektoren.
Während Typ-Selektoren jede Instanz eines Elements beeinflussen, können Klassen-Selektoren benutzt werden, um gezielt HTML-Elemente mit Klassen-Attributen auszuwählen – wiederum unabhängig von der Position im Dokumentenbaum
Falls man zum Beispiel den jeweils ersten Absatz und das erste Listenelement hervorheben möchte, kann man folgendes schreiben:
<body>
<p class="big">This is some <em>text</em></p>
<p>This is some text</p>
<ul>
<li class="big">List item</li>
<li>List item</li>
<li>List <em>item</em></li>
</ul>
</body>
Der Dokumentenbaum würde folgendermaßen aussehen:
Die benutzte Regel könnte folglich so aussehen:
.big { font-size: 110%; font-weight: bold; }
Wenn man noch präziser werden will, hat man die Möglichkeit Klassen- und Typ-Selektoren gemeinsam zu verwenden. Jeder Typ-Selektor kann benutzt werden.
div.big { color: blue; }
td.big { color: yellow; }
label.big { color: green; }
form.big { color: red; }
Wenn man beispielsweise den ersten Absatz und das erste Listenelement auf einer Seite ansprechen will, um ihnen eine größere Schriftart zu geben – jedoch soll nur der Absatz in einem fetten Schnitt dargestellt werden.
Um dies zu erreichen, könnte man die folgenden Regeln benutzen:
.big { font-size: 110%; } /* beeinflusst p und li */
p.big { font-weight: bold; }/* beinflusst nur p */
ID-Selektoren sind ähnlich wie Klassen-Selektoren. Sie können benutzt werden, um jedes HTML-Element auszuwählen, welches ein ID-Attribut besitzt – unabhängig von dessen Position im Dokumentenbaum. Beispiele eines ID-Selektors:
#navigation { width: 12em; color: #333; }
div#navigation { width: 12em; color: #333; }
Der Hauptunterschied ist, dass IDs nur einmal pro Seite existieren dürfen, während Klassen so oft benutzt werden können wie nötig.
Nachfahren-Selektoren können Elemente auswählen, welche Nachfahren eines anderen Elements im Dokumentenbaum sind.
Beispielsweise möchte man ein bestimmtes <em>-Element auf einer Seite auswählen - jedoch nicht alle <em>-Elemente. Ein Beispieldokument könnte folgenden Code enthalten:
<body>
<h1>Heading <em>here</em> </h1>
<p>Lorem ipsum dolor <em>sit</em> amet.</p>
</body>
Das Diagramm des Dokumentenbaums (mit dem <em>-Element, was ausgewählt werden soll) würde folgendermaßen aussehen:
Würde man einen Typ-Selektor benutzen, würden alle <em>-Elemente der Seite ausgewählt:
em {color: blue; }
Nimmt man stattdessen einen Nachfahren-Selektor kann man verfeinern, welche <em>-Elemente man auswählt. Die folgende Regel würde nur die <em>-Elemente auswählen, die Nachfahren von <p>-Elementen sind. Wenn diese Regel angewendet wird, würde das <em>-Element in der <h1>-Überschrift nicht blau eingefärbt werden.
p em {color: blue; }
Man kann auch Ebenen in der Dokumentenbaumstruktur überspringen um Nachfahren zu selektieren. Beispielsweise folgender Code:
<body>
<p>Lorem ipsum dolor <em>sit</em> amet.</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li><em>item 3</em></li>
</ul>
</body>
Der Dokumentenbaum (mit einem hervorgehobenen <em>-Element in der dritten Ebene) würde so aussehen:
Mit der folgenden Regel kann man alle <em>-Elemente in einem <ul>-Element isolieren, ohne dass man das <li>-Element beschreiben müsste. Würde diese Regel angewendet, wären alle <em>-Elemente in einem <ul>-Element blau gefärbt. Das <em>-Element in dem <p> würde jedoch nicht blau dargestellt:
ul em {color: blue; }
Bis jetzt basierten alle Selektoren auf Elementen im Dokumentenbaum. Es wird aber auch mal nötig sein müssen, dass man etwas verändern mächte wo kein CSS-Selektor passend wäre, wie z.B. den Status eines Hyperlinks (aktive oder besuchte Links)
Pseudoklassen ermöglichen es solche Elemente zu formatieren, welche nicht im Dokumentenbaum auftauchen. Dies umfasst beispielsweise:
Mit Pseudoklassen kann man das Aussehen von Links in allen vier Status beeinflussen
a:link ist der Selektor für normale Links
a:visited ist der Selektor für bereits besuchte Links
a:hover ist der Selektor für den Hover-Status (wenn sich der Mauszeiger über dem Link befindet)
a:active ist der Selektor für aktive Links
Aufgrund der Spezifität wird der Selektor, der später im Stylesheet auftaucht, benutzt, falls es zu Konflikten kommt. Aus diesem Grund sollten die Pseudoklassen-Selektoren immer in der folgenden Reihenfolge benutzt werden:
a {}
a:link {}
a:visited {}
a:hover {}
a:active {}
Alle üblichen Eigenschaften können für diese 4 Status verwendet werden. Man kann auch mehrere Status kombinieren, solange die Reihenfolge (link und visited vor hover und active) beibehalten wird:
a:link, a:visited { color: blue; }
a:hover, a:active { color: red; }
Wenn man das Aussehen der vier Link-Status beeinflusst, sollte man im Auge behalten, dass das Beeinflussen von Standard-Linkverhalten (z.B. unterstrichene Links) für manche Nutzer verwirrend sein kann und diese evtl. nicht erkennen, dass sich dahinter ein Link verbirgt.