English | česky | >> Português <<ZVON > Tutorials > CSS2 tutorial
>> Exemplo 3 << | Anterior | Próximo | Index | Conteúdos

Os nomes de elementos separados por espaços escolhem elementos com nome igual ao último da lista. Os outros devem ocorrer algures pelo percurso desde a raíz do documento até este elemento. Ou seja, são elementos antecedentes ("ancestors") do elemento em causa (1). Se os nomes dos elementos estão separados por [>], o elemento da direita deve ser directamente filho do elemento da esquerda (2). O caracter [*] pode ser usado para obter alguns efeitos interessantes. Em (3), os elementos netos de AAA estão a vermelho. Embora não seja neto de AAA, o elemento ddd2 também está colorido por herdar a cor do ser pai.

Documento XMLfolha de estilos CSSExemplo de ligação
(1)
     <AAA>
          <BBB>
               <DDD>ddd1
                    <DDD>ddd2</DDD>
               </DDD>
          </BBB>
          <CCC>
               <DDD>ddd3</DDD>
          </CCC>
          <DDD>ddd4</DDD>
          <OOO>
               <PPP>
                    <RRR>rrr1</RRR>
               </PPP>
          </OOO>
          <RRR>rrr2</RRR>
     </AAA>

AAA CCC DDD {color:blue}
BBB DDD {color:maroon}
OOO RRR {color:red}
Ver resultado
Documento XMLfolha de estilos CSSExemplo de ligação
(2)
     <AAA>
          <BBB>
               <DDD>ddd1
                    <DDD>ddd2</DDD>
               </DDD>
          </BBB>
          <CCC>
               <DDD>ddd3</DDD>
          </CCC>
          <DDD>ddd4</DDD>
          <OOO>
               <PPP>
                    <RRR>rrr1</RRR>
               </PPP>
          </OOO>
          <RRR>rrr2</RRR>
     </AAA>

AAA > CCC > DDD {color:blue}
BBB > DDD {color:maroon}
OOO > RRR {color:red}
Ver resultado
Documento XMLfolha de estilos CSSExemplo de ligação
(3)
     <AAA>
          <BBB>
               <DDD>ddd1
                    <DDD>ddd2</DDD>
               </DDD>
          </BBB>
          <CCC>
               <DDD>ddd3</DDD>
          </CCC>
          <DDD>ddd4</DDD>
          <OOO>
               <PPP>
                    <RRR>rrr1</RRR>
               </PPP>
          </OOO>
          <RRR>rrr2</RRR>
     </AAA>

AAA > * > * {color:red}
Ver resultado