Pseudoklasa CSS :first-child

Pseudoklasa CSS :first-child wybiera każdy element, który jest pierwszym dzieckiem innego elementu. Jeśli dołączymy ją do selektora, to będzie wybierała każdy element wskazywany przez ten selektor, który jest pierwszym dzieckiem innego elementu.

Przykłady użycia :first-child

W poniższym przykładzie pseudoklasa :first-child wybierze wszystkie elementy, które są pierwszymi dziećmi swoich rodziców. W tym przypadku będą to elementy span i strong, ponieważ każdy z nich jest pierwszym dzieckiem swojego rodzica. Nie wybierze natomiast elementu em, ponieważ ten nie jest pierwszym dzieckiem — znajduje się za elementem strong.

<style>
  :first-child {color: red}
</style>
…
<div>
  <p>To jest <span>jakiś</span> akapit.</p>
  <p>Akapit <strong>ważnego</strong> i <em>oczywiście</em> ciekawego tekstu.</p>
</div>

W tym przykładzie pseudoklasa :first-child wybiera wszystkie elementy p i blockquote, które są pierwszym dzieckiem swojego rodzica. Ten warunek spełnia tylko element p, ponieważ jest on pierwszym dzieckiem w elemencie aside. Element blockquote nie spełnia tego warunku, ponieważ znajduje się za akapitem, a więc jest drugim dzieckiem.

<style>
  p:first-child {color: green;}
  blockquote:first-child {color: pink;}
</style>
...
<aside>
  <p>To jest jakiś akapit.</p>
  <blockquote>Długi cytat.</blockquote>
</aside>

Składnia

Składnia pseudoklasy :first-child:

:first-child {}