: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; }