29 de novembro de 2007

CSS: Seletores Avançados

Uma das coisas mais básicas em CSS são os seletores. Quando você começa a estudar CSS, você aprende que seletores são a parte de uma regra CSS que escolhe os elementos que serão estilizados.

Quando usados corretamente, os seletores avançados farão você economizar IDs e CLASSes no seu HTML e ainda criar efeitos interessantes que seriam impensáveis usando os seletores básicos.

Chega de conversa e vamos ao artigo!

Seletores descendetes



Os seletores descendentes são aqueles que estilizam o descendente do primeiro elemento declarado. Na regra a seguir, a cor azul só irá para os strongs que estiverem dentro de algum p.

p strong {
color: blue;
}

Ou seja, se a tag strong estiver fora da tag p, ela não será estilizada. Esse tipo de seletor evita o uso desnecessário dos atributos class e ID, deixando o código mais limpo.

Seletores Filho



Os seletores filhos só estilizam quem for "filho" direto do outro elemento. Esse seletor é identificado colocando um sinal de '>' (maior que) entre o elemento "pai" e o elemento "filho".

div > strong {
color: blue;
}

<div>
<strong>Texto que vai ser estilizado pelo seletor filho</strong>
<p><strong>Texto que não vai ser estilizado pelo seletor filho</strong></p>
</div>

No exemplo anterior, somente o primeiro strong vai estar na cor azul, pôs ele é um descendente direto da tag div. Já o segundo strong, é descendente da tag p, que por sua vez é descendente da tag div, logo ele não vai ser estilizado.

Seletores de atributo



Os seletores de atributo, selecionam um elemento baseando-se em seu atributo. As formas mais comuns de usar os seletores de atributo são:

[atri]
Seleciona um elemento que tenha o atributo "atri"

[atri=val]
Seleciona um elemento que tenha o atributo "atri" e o valor "val"

Para saber se um seletor é compatível com determinado browser, consulte a Tabela de compatibilidade de CSS.


Referencias:
Seletores CSS 2.1 parte 2

Tags:

0 comentários: