Podsumowanie
Pseudoklasa :first-child sprawia iż własności stosowane są do elementu tylko wtedy gdy jest on pierwszym węzłem potomnym swojego rodzica. :first-child ignoruje węzły tekstowe. Pseudoklasą, która działa identycznie, jednak uwzględnia węzły tekstowe jest :first-node.
Składnia
selektor:first-child { własności }
Przykłady
<html>
<body>
Trochę tekstu.
<span id="first">pierwszy</span>
<div>
<span id="dfirst">pierwszy</span>
<span id="dsecond">drugi</span>
</div>
<span id="second">drugi</span>
</body>
</html>
span:first-child { font-weight: bold; }
Powyższy zapis pogrubi czcionkę wewnątrz wszystkich elementów span, które są pierwszymi dziećmi swoich rodziców. Zostaną tutaj pogrubione słowa "pierwszy":
- W pierwszym przypadku span o id
firstjest pierwszym dzieckiem elementubody - W drugim przypadku span o id
dfirstjest pierwszym dzieckiem elementudiv
div:first-child:last-child { background-color: red; }
Ten przykład ustawi czerwony kolor tła wszystkim elementom div, które są jedynymi dziećmi swojego rodzica.
<table>
<tr>
<td>Nagłówek k1</td>
<td>Nagłówek k2</td>
</tr>
<tr>
<td>Wiersz k1</td>
<td>Wiersz k2</td>
</tr>
<tr>
<td>Wiersz k1</td>
<td>Wiersz k2</td>
</tr>
<tr>
<td>Wiersz k1</td>
<td>Wiersz k2</td>
</tr>
</table>
table tr:first-child { background-color: red; }
Ten przykład ustawi czerwone tło pierwszemu wierszowi tabeli (nagłówkowi).
UWAGA: Ten przykład ma za zadanie pokazać jak działa pseudoklasa :first-child.