English | česky | >> Português <<ZVON > Tutorials > CSS2 tutorial
Introdução / Procura / ZVON
>> Exemplo 4 << | Anterior | Próximo | Index | Conteúdos

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 XMLfolha de estilos CSSExemplo 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 XMLfolha de estilos CSSExemplo 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 XMLfolha de estilos CSSExemplo 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