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 |