Pseudoklassen und Pseudoelemente

Pseudoklassen und Pseudoelemente sind im Grund genommen keine Stylesheet-Eigenschaften. Sie sind vielmehr Selektoren, die auf Elemente zugreifen, die es in HTML in dieser Form gar nicht gibt – darum auch die Bezeichnung "Pseudo". Beispiele für Pseudoklassen sind "ein Hyperlink, über dem die Maus schwebt (hover)", "der erste Buchstabe eines Absatzes" oder "Angaben, die vor ein dynamisch erzeugtes Element gesetzt werden".

:active • :hover • :link • :visited • :focus • :first-child • :first-line • :first-letter • :before • :after

Pseudoklassen

:active, :hover, :link, :visited, :focus

IE5+ N6 O5
Version: CSS1 /CSS2

:active, :hover, :link, :visited und :focus sind für das HTML-Ankertag gedacht und animieren einen Hyperlink je nach Zustand des Links – typischerweise in verschiedenen Hintergrund/Schriftfarben-Kombinationen.
:focus ist darüber hinaus nicht nur für die Animation von Hyperlinks reserviert, sondern kann z.B. auch für die Animation von Eingabefeldern herangezogen werden.

Die Pseudoklassen werden durch einen Selektor, gefolgt von einem Doppelpunkt, gefolgt von der Bezeichnung der Pseudoklasse gebildet:

selector:pseudo-class { eigenschaft: wert; ...; }

und können auch mit einer Klasse oder einem Kontextselektor benutzt werden.

selector.klasse:pseudo-class { eigenschaft: wert; ...; }

Die Pseudoklasse :active tritt in Aktion, wenn ein Link gewählt wird (solange die Maus auf ihn geklickt ist).

Die Pseudoklasse :hover tritt in Aktion, wenn die Maus über dem Link liegt (mouse over).

Die Pseudoklasse :link ist der Vorgabewert und bezeichnet einen Link, der nicht aktiv ist und noch nicht besucht worden ist.

Die Pseudoklasse :visited tritt in Aktion, wenn ein Link bereits besucht worden ist (im Cache des Browsers gespeichert ist).

Die Pseudoklasse :focus tritt in Aktion, wenn ein Element mit der Maustaste geklickt wurde oder durch die Tabulatortaste auf der Tastatur ausgewählt wurde, und bleibt so lange aktiv, bis ein anderes Element geklickt wird oder durch die Tabulatortaste mit der Tastatur markiert wird.

Bemerkung

Seit CSS2 können Zustände auch miteinander kombiniert werden. Insbesondere bedeutet das, dass ein Link, der bereits besucht wurde, ein erneutes :hover anzeigt und in der Zeit, in der die Maus ein weiteres Mal auf ihn geklickt wird, den Klick durch eine neue Darstellung anzeigen kann.

a:visited:hover { color:black; background: white }
a:visited:active { color:white; background: blue }

Beispiel

a:link { color: ivory; background: salmon}
         a:active { color: snow; background: tomato}
         a:visited { color: slategray; background: mintcream} 
         a:hover { color: tomato; background: ivory}
         a:visited:hover { color:black; background: green }
         a:visited:active { color:white; background: gray }

↑

Pseudoelemente

:first-child, :first-line, :first-letter

IE5 (Mac), IE6 N6 Opera 5+ (nicht first-child)
Version: CSS1 /CSS2

:first-child, :first-line und :first-letter sind für die Formatierung von Absätzen definiert. Sie bilden Stilelemente des Drucks nach.

:first-child formatiert das erste Vorkommen eines Elements in einem umspannenden Element, z.B. den ersten Absatz <p> in einem div-Container.
:first-line formatiert die erste Zeile in einem Absatz.
:first-letter formatiert den ersten Buchstaben eines Textes.

Beispiel

p:first-line { font-weight:bold }
p:first-letter { font-size:380%; 
      color:red; 
      float:left; 
      margin-right:2px; }
div { background-color: floralwhite; 
      width: 450px; 
      padding: 10px; 
      border: 1px solid #666666; }
div p:first-child { background-color: khaki; 
      padding: 10px;}

↑

:before, :after

M1 N6 O5+
Version: CSS1 /CSS2

:before und :after fügen Inhalte automatisch vor oder nach einem dynamisch generierten Element ein.

content

content legt den Inhalt fest, der vor oder nach einem HTML-Element eingefügt werden soll. Besonders interessant ist diese Technik, wenn die Daten aus einer Datenbank gelesen werden. Das könnten in einer E-Shop-Anwendung zum Beispiel eine Produktbezeichnung, eine Kategorie und ein Preis sein. Der Text "Preis €" wird dem Preis aus der Datenbank automatisch voran- und nachgestellt. Beim Übergang von der Angabe "Preis DM" zur neuen Angabe "Preis €" hätte die Änderung an einer Stelle im Stylesheet gereicht, um die E-Shop-Anwendung oder einen Katalog auf die neue Preisauszeichnung umzustellen.

Beispiel

td.preis:before { content: " ¢ " }
td.preis:after  { content: " zzgl. MwSt " }
td.kategorie:before { content: url(bilder/pseudobild.gif)"  "; }
td.kategorie:after  { content: "  "attr(title); }
...
<table>
<tr><td class="kategorie" title="(Rosen)">Rose Rugora</td>
   <td class="preis">65</td></tr>
<tr><td class="kategorie" title="(Nelken)">Melanie </td>
   <td class="preis">80</td></tr>
<tr><td class="kategorie" title="(Tulpen)">Tauprinzessin</td>
   <td class="preis">19</td></tr>
<tr><td class="kategorie" title="(Kakteen)">Sommernachtstraum</td>
   <td class="preis">27</td></tr>
<tr><td class="kategorie" title="(Begonien)">Bianca</td>
   <td class="preis">91</td></tr>
</table>

Tabellenansicht in Dreamweaver: