>> English << | česky | PortuguêsZVON > Tutorials > CSS2 tutorial
Intro / Search / ZVON
>> Example 4 << | Prev | Next | Index | Contents

The first child elements can be selected with pseudo-class selector first:child (1). If two elements are separated with character [+] then the second element is selected only if it is preceeded by the first one (2). (3) selects all first children.

XML SourceCSS stylesheetExample link
(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}
View output
XML SourceCSS stylesheetExample link
(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}
View output
XML SourceCSS stylesheetExample link
(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}
View output