Selektoren für HTML-Tags

Elementtypen

Um ein zentrales Format für alle HTML-Elemente eines bestimmten Typs zu definieren, wird als als sog. Selektor der Name des HTML-Elementtyps angegeben, und zwar ohne spitze Klammern. Im folgenden Beispiel werden body (Dokument), h1 (Überschriften 1. Ordnung), p (Textabsätze) und li (Listeneinträge) auf diese Weise notiert.

Über den Universalselektor * hat man die Möglichkeit, Eigenschaften für alle Elemente zu definieren, wobei jedem Element natürlich nur die jeweils zulässigen Eigenschaften zugewiesen werden.

Wenn ein Format für mehrere HTML-Elementtypen definiert werden soll, werden alle gewünschten Elementtypen angegeben-

/* für einzelne Tags */
body { background-color: #FFFFCC;
       margin-left: 100px; }
h1 { font-size: 300%;
     color: #FF0000;
     font-style: italic;
     border-bottom: solid thin black; }
 
/* für mehrere Tags */
p,li { font-size: 110%;
       line-height: 140%;
       font-family: Helvetica,Arial,sans-serif;
       letter-spacing: 0.1em;
       word-spacing: 0.3em; }
 
/* für alle Tags */
* { color:blue; }

spezielle Selektoren

Übersicht
Übersicht (zur Verknüpfung und Verschachtelung)

Wichtig sind nur die für die Links

a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

(Die Reihenfolge der Deklaration ist wichtig!)

:active aktiver Hyperling
:after Nach einem Element
:before Vor einem Element
:first-child Das erste „Kind“
:first-letter Das erste Zeichen einer Zeile
:first-line Die erste Zeile in einem Absatz
:focus Fokusierte Formularelemente
:hover mouse over
:link Hyperlink
:visited besuchter Link

Beispiel