====== 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- 

<code css>
/* 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; }
</code>

===== Nachfahren-Selektor =====
''Selektor1 Selektor2 ... {Eigenschaft: Wert}''

<code css>
<style type="text/css">
    p b { color: #a00; }
</style>
</code>

===== Kind-Selektor =====
''Selektor1>Selektor2 {Eigenschaft: Wert}''

<code css>
<style type="text/css">
    p>b { background-color: #eee; }
</style>
</code>


===== spezielle Selektoren =====

[[http://www.w3schools.com/cssref/css_selectors.asp|Übersicht]]\\
[[http://de.wikipedia.org/wiki/Cascading_Style_Sheets#Definition_des_Syntaxschemas|Übersicht (zur Verknüpfung und Verschachtelung)]]

Wichtig sind nur die für die [[http://www.w3schools.com/css/css_link.asp|Links]]

<code css>
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 */
</code>
(Die Reihenfolge der Deklaration ist wichtig!)

| //:active// | aktiver Hyperlink |
| //: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 |

[[http://www.w3schools.com/css/tryit.asp?filename=trycss_link|Beispiel]]