CSS2.02.1 I.E. -

:first-child

Pseudo-třída, kterou můžete použít pro jakýkoliv HTML tág. Používá se pro formování prvního potomka HTML tágu, který se vyskytne za rodičovským HTML tágem. Rodičovský HTML tág je hlavní tág v dokumentu a potomkový HTML tág je ten který se vyskytuje uvnitř rodičovského HTML tágu.
Tato pseudo-třída je obdobou kontextuálního selektoru.

V tomto příkladu uvedu jak to funguje, rodičovský HTML tág představuje <DIV> a potomka bude představovat HTML tág <B>.

Příklad 1:

div > b:first-child { 
   color: red; 
} 

Vysvětlení:
jestliže se v tágu <DIV> vyskytne tág <B> jako první HTML tág bude formován na červený text jinak bude formování ignorováno.

Níže je zdrojový kód HTML stránky a zvýrazněno kdy je formování provedeno a kdy bude formátování ignorováno protože potomkový HTML tág není první. Vycházím ze základního nastavení kaskádového stylu z Příklad 1.

Příklad 2:

<DIV>
   <B> První potomek </B>
   Další text jen pro ty zvědavé a ti co se chtějí zdokonalovat.
   <B> Druhý potomek </B> je ignorován protože je až druhý
</DIV>

Tato pseudo-třída umožňuje také zadání alternativy, to pro případ že potřebujete zadat potomkový HTML tág pro předem nespecifikovaného rodičovského HTML tágu. Příklad níže představuje zadání pro jakéhokoliv rodičovského HTML tágu.

Příklad 3:

/* ukázka dvou zcela shodných příkladů */
* > b:first-child { 
   color: red; 
} 

b:first-child { 
   color: red; 
}