Pseudoklassen werden in CSS verwendet um einzelne Elemente zu formatieren z.B. “a:hover”.
In CSS3 sollen 16 neue Pseudoklassen hinzukommen. Hier eine kurze Beschreibung der wichtigsten neuen Pseudoklassen:
:nth-child(N)
Das nte(n) Child-Element(e) vom Anfang aus auswählen formatieren
:nth-last-child(N)
Das nte(n) Child-Element(e) vom Ende aus auswählen und formatieren
:last-child
Das letzte Childelement auswählen
:nth-of-type(N)
Das nte(n) Element(e) X vom Anfang aus auswählen formatieren
:nth-last-of-type(N)
Das nte(n) Element(e) X vom Ende aus auswählen und formatieren
:first-of-type
Das erste Element(e) X vom Anfang aus auswählen formatieren
:last-of-type
Das letzte Element(e) X auswählen und formatieren
(N) steht für:
- Anzahl und Position der Child-Elemente
- oder even / odd
Ein Beispiel mit einer Tabelle wird die Vorteile der Pseudoklassen verdeutlichen:
Eine gegebene Tabelle sieht so aus:
<table >
<tr>
<th>Position</th>
<th>Preis</th>
<th>Anzahl</th>
<th>Summe</th>
</tr>
<tr>
<td>Turnschuhe</td>
<td>150.00</td>
<td>1</td>
<td>150.00</td>
</tr>
<tr>
<td>Polo shirt</td>
<td>50.00</td>
<td>2</td>
<td>100.00</td>
</tr>
<tr>
<td>Sporthose</td>
<td>49.00</td>
<td>2</td>
<td>98.00</td>
</tr>
<tr>
<td colspan="3">Zwischensumme</td>
<td>348.00</td>
</tr>
<tr>
<td colspan="3">Versand</td>
<td>12.00</td>
</tr>
<tr>
<td colspan="3">Gesamtsumme</td>
<td>360.00</td>
</tr>
</table>
Das Stylesheet:
/* Tables */
table {
border: 1px solid #e7e7e7;
border-collapse: collapse; border-spacing: 0;
font-size: 14px;
width: 100%;
text-align: left;
}
/* th */
tr th {
background: #f3f9fc;
border-left: 1px solid #e9f2f7;
color: #444;
font-size: 15px;
font-weight: bold;
padding: 9px 24px;
}
/* td */
tr td {
background: #fafafa;
border: 1px solid #e7e7e7;
padding: 6px 24px;
}
td { vertical-align: top; }
CSS3
td:nth-child(n+2){
text-align:right;
}
tr:nth-last-child(-n+3) td {
text-align: right;
}
tr:last-child, td:last-child{
font-weight: bolder;
}
tr:nth-last-child(2){
color:green;
}
tr:last-child td:last-child{
font-size: 24px;
}
Das Layout würde nun so aussehen:

Links:
http://reference.sitepoint.com/css/css3psuedoclasses
http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/