Stil mit {stil}

Mar 2008

CSS-Selektoren: Pseudoklassen, Pseudolinks und Pseudoelemente (CSS1|2)

CSS-Pseudoklassen filtern keine HTML-Tags anhand von Tagnamen, Attributen oder ihrer Position im Dokument, sondern Elemente, die so im Dokument gar nicht vorkommen – z.B. Zustände von Links, über denen die Maus gerade hovert, den ersten Absatz nach einer Überschrift oder das erste Zeichen eines Absatzes.

Im HTML-Code können diese Elemente gar nicht erreicht werden (es gibt kein Tag für „die erste Zeile eines Absatzes“ oder „das erste Zeichen eines Absatzes“) und ihre Darstellung kann dementsprechend nicht über das style-Attribut beeinflusst werden.

Pseudoklassen werden im Stylesheet durch einen Doppelpunkt vom Selektor getrennt: a:hover oder a.extern:hover.

Pseudoklassen	Bezeichnung / Bschreibung	Beispiel	IE
E:link	Alle Elemente E, die einen Hyperlink zu einem noch nicht besuchten Ziel darstellen	a:link { text-decoration: none; color: purple; }	IE5
E:visited	Alle Elemente E, die einen Hyperlink zu einem noch nicht besuchten Ziel darstellen	a:visited { text-decoration: none; color: purple; }	IE5
E:active	Dynamischer Pseudolink E-Elemente während das Element aktiviert ist (z.B. Maustaste auf einen Link gedrückt ist)	a:active { background: #8FBC8F }	IE5
E:hover	Dynamischer Pseudolink E-Elemente während die Maus über dem Element hovert	li:hover { background: #8FBC8F }	IE5
E:focus	Dynamischer Pseudolink E-Elemente während der Fokus auf dem Element liegt	input:focus { background: lavender }	IE8
E:first-child	Erstes Kind eines Eltern-Elements	td:first-child { font-weight: bold; color: green };	IE7
E:last-child	Letztes Kind eines Eltern-Elements	td:last-child { font-weight: bold; color: red };	IE7
E:first-line	Erste Zeile in einem Text	p:first-line { color: purple };	IE7
E:first-letter	Erstes Zeichen in einem Text	p:first-letter { color: purple };	IE7
E:before, E:after	:before und :after fügen Inhalte automatisch vor oder nach einem dynamisch generierten Element ein.	td.preis:before { content: " ¢ " } td.preis:after { content: " zzgl. MwSt " }	IE8

Pseudolinks

Das Abfangen der verschiedenen Zustände eines Links wurde durch Link-Pseudoklassen bewältigt, die schnell von allen Browsern unterstützt wurden.

a:link    { background: thistle; }
a:visited { background: lavender; }
a:hover   { background: pink;  } 
a:focus   { background: lightpink; }
a:active  { background: plum; }

Die Reihenfolge der Pseudoselektoren muss wie hier :link, :visited, :hover, :focus, :active sein. Ansonsten überschreibt z.B. :visited den Pseudoselektor :hover.

CSS2 erlaubt eine weitere Differenzierung, bei der die Pseudoklassen hintereinander geschaltet sind. Wenn der Browser diese Funktionalität unterstützt, muss der Hintergrund eines bereits besuchten Links blau werden und seine Schrift weiß, wenn die Maus über ihm hovert:

a:visited:hover { background: gray; color: white }

:hover – nicht nur bei Links

• lists
  • list-style-image
  • list-style-position
  • list-style-type
  • list-style
• CSS Positionieren
  • float
  • clear
  • position
  • top
• Inhalte generieren
  • counter-increment
  • counter-reset
  • quotes
• Pseudoklassen (CSS1|2)
  • Pseudoklassen (CSS3)
  • Attribut-Selektoren
  • Kontext-Selektoren

---

Heute unterstützen die meisten Browser das Ändern einer CSS-Eigenschaft beim Hovern mit der Maus nicht mehr nur bei a-Tags. So kommen wir dann mit CSS an eine aufpoppende Navigation ganz ohne Javascript. Das funktioniert auch in Internet Explorer, allerdings erst ab IE 7.

ul.col ul 
          { display: none;  
          }
ul.col li:hover ul 
          { display: block; position: absolute; 
            left: 14em; z-index: 10; margin-top: -2em; width: 12em; list-style: none;  
          }

So erhalten z.B. Tabellenzeilen mit tr:hover einen farbigen Hintergrund, wenn die Maus über ihnen hovert.

:focus

Die Pseudoklasse :focus entdeckt, ob ein Feld aktiviert wurde – entweder durch einen Klick mit der Maus in das Feld oder durch eine Navigation mit dem Tabulator der Tastatur.

input#name { background: lavender; }
input#name:focus { background: white; }

:focus funktioniert in IE 7 nur auf Links, nicht aber bei Eingabefeldern in Formularen.

:focus mit Attribut-Selektor

input[type="password"]:focus { background: pink; }

Wenn das Eingabefeld in den Fokus kommt, soll es pink hinterlegt werden.

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

Die Pseudoklasse :first-child selektiert das erste Kind eines Elternelements – gleich, um welches Element es sich handelt.

:first-line formatiert die erste Zeile in einem Text

:first-letter formatiert den ersten Buchstaben eines Textes

p:first-line { 
   color: purple; font-weight: bold;
}
p:first-letter { 
   color: mediumvioletred; 
   font-size: x-large; 
   float: left; 
}
p:first-child { 
   color: mediumvioletred; 
}

---

:before

Die generelle Syntax ist

selector:before { content: "<string>" attr(<x>) attr(<y>) "<string>"; }

Die CSS-Eigenschaft content setzt im folgenden Beispiel ein Bild vor einen Link und hinter den Link die ausgeschriebene Adresse in runde Klammern. Interessant ist eine derartige Eigenschaft z.B. für die Darstellung einer Webseite im Druck, wo der Benutzer mit dem reinen Text eines Links nichts anfangen kann.

a.show:before { content: url(bild.gif) " " attr(href) " "; }
…
<p><a class="show" href="…generated.html">Hier ist ein Link</a></p>

Hier ist ein Link

before: und :after :: Inhalte per CSS einfügen

Die CSS-Eigenschaft content fügt automatisch die wiederkehrenden Phrasen »¢« und »zzgl. MwSt« vor und nach dem Preis in eine Preisliste ein und verringert den Schreibaufwand.

Rose Rugora	65
Tulpe Melanie	80
Tauprinzessin	19
Sommernachtstraum	27
Bianca	91

td.preis:before { content: " ¢ " }            // Fügt ¢ vor dem Inhalt von td.preis ein 
td.preis:after { content: " zzgl. MwSt " }    // Fügt zzgl. MwSt nach dem Inhalt von td.preis ein
...
<table> 
   <tr><td>Rose Rugora</td> <td class="preis">65</td></tr>
   <tr><td>Tuplpe Melanie </td> <td class="preis">80</td></tr>
   <tr><td>Tauprinzessin</td> <td class="preis">19</td></tr>
   <tr><td>Sommernachtstraum</td> <td class="preis">27</td></tr>
   <tr><td>Bianca</td> <td class="preis">91</td></tr>
</table>