Klassen-Selektor
.spezial { font-family: Verdana, Arial, Helvetica, sans-serif; }
Um einen Stil für mehrere HTML-Elemente auf einmal zu definieren, benutzt man den Klassen-Selektor. Jedes Element, auf den der Stil zutrifft, bekommt einen entsprechenden Attributeintrag, der auf die Stilregel verweist.
p.spezial { font-family: Verdana, Arial, Helvetica, sans-serif; }
Damit gilt eine Klasse nur für einen bestimmten Elementtyp.
ID-Selektor
#einzigartig { font-size: 10px; }
Mit einem ID-Selektor kann man Stilregeln festlegen, die nur für ein einziges HTML-Element auf der Seite gültig sind.
Pseudo-Klassen-Selektor
p:first-letter { font-size: 250%; }
a:hover { color: #FFCC00; }
Diese Klassen-Selektoren sind Sonderfälle unter den CSS-Selektoren. Sie können sich auf eine Eigenschaft oder ein ganzes Element beziehen.
Nachfahren-Selektor
div i { color: red; }
Damit wird festgelegt, dass i-Elemente, sofern sie innerhalb eines div-Bereichs vorkommen, rote Textfarbe erhalten.
div * b { color: violett; }
Der Universal-Selektor * wird hier als Platzhalter für ein beliebiges Element und damit für eine weitere Verschachtelungsebene verwendet.
Kind-Selektor
div > p { color: blue; }
Mit dem Zeichen > wird in diesem Selektor festgelegt, dass p-Elemente, sofern sie innerhalb eines div-Bereichs vorkommen, nur dann blaue Textfarbe erhalten, wenn das p-Element in dieser Form vorkommt: <div><p></p></div>, also eine Ebene unterhalb des div-Elements.
Nachbar-Selektor
div + p { margin-top: 100px; }
Mit eindem Zeichen + wird in diesem Selektor festgelegt, dass p-Elemente, die unmittelbar auf ein div-Element hin folgen, einen Abstand von 100 Pixeln nach oben hin erhalten.
Attribut-Selektor
input [type="text"] { color: white; background-color: black; }
Mit diesem Selektor werden Attribute angesprochen, denen ein bestimmter Wert zugewiesen ist.
Selektor-Gruppierung
h1, h2, h3 { color: white; background-color: black; }
Um nur eine Stilregel gleich für mehrere Elemente zu verwenden, kann man Selektoren gruppieren. Die Elemente werden dafür einfach durch Komma von einander getrennt.