English | >> česky << | PortuguêsZVON > Tutorials > CSS2 tutorial
Úvod / Hledej / ZVON
>> Příklad 4 << | Předešlý | Následující | Index | Obsah

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 dokumentCSS stylOdkaz 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 dokumentCSS stylOdkaz 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 dokumentCSS stylOdkaz 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