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