Pseudo-třída "first:child" vybere prvního přímého potomka (1). Když jsou dva elementy odděleny znaménkem plus [+], pak je vybrán druhý element - a to pouze v případě, že jeho přímý předchůdce je ten první (2). (3) vybere všechny první přímé potomky.
| XML dokument | CSS styl | Odkaz na příklad |
|---|---|---|
|
(1)
<AAA> <BBB>bbb1</BBB> <BBB>bbb2</BBB> <BBB>bbb3</BBB> <CCC>ccc1</CCC> <BBB>bbb4</BBB> <CCC>ccc2</CCC> <DDD>ddd1 <CCC>ccc3</CCC> <CCC>ccc4</CCC> </DDD> <DDD>ddd2</DDD> <BBB>bbb5</BBB> </AAA> | BBB {color:blue} BBB:first-child {color:red} CCC:first-child {color:teal} | Zobraz výstupy |
| XML dokument | CSS styl | Odkaz na příklad |
|
(2)
<AAA> <BBB>bbb1</BBB> <BBB>bbb2</BBB> <BBB>bbb3</BBB> <CCC>ccc1</CCC> <BBB>bbb4</BBB> <CCC>ccc2</CCC> <DDD>ddd1 <CCC>ccc3</CCC> <CCC>ccc4</CCC> </DDD> <DDD>ddd2</DDD> <BBB>bbb5</BBB> </AAA> | BBB {color:blue} BBB + BBB {color:red} CCC + BBB {color:teal} BBB + CCC {color:fuchsia} | Zobraz výstupy |
| XML dokument | CSS styl | Odkaz na příklad |
|
(3)
<AAA> <BBB>bbb1</BBB> <BBB>bbb2</BBB> <BBB>bbb3</BBB> <CCC>ccc1</CCC> <BBB>bbb4</BBB> <CCC>ccc2</CCC> <DDD>ddd1 <CCC>ccc3</CCC> <CCC>ccc4</CCC> </DDD> <DDD>ddd2</DDD> <BBB>bbb5</BBB> </AAA> | *:first-child {color:green} | Zobraz výstupy |