O primeiro filho de um elemento pode ser seleccionado com um selector "first-child" (1). Se dois elementos estão separados pelo caracter [+], então o segundo elemento é seleccionado se é precedido pelo primeiro elemento (2). Em (3) seleccionamos todos os primeiros filhos.
| Documento XML | folha de estilos CSS | Exemplo de ligação |
|---|---|---|
|
(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} | Ver resultado |
| Documento XML | folha de estilos CSS | Exemplo de ligação |
|
(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} | Ver resultado |
| Documento XML | folha de estilos CSS | Exemplo de ligação |
|
(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} | Ver resultado |