>> English << | česky | Português | ZVON > 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 Source | CSS stylesheet | Example 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 Source | CSS stylesheet | Example 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 Source | CSS stylesheet | Example 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 |