Em breve os seletores Child/Sibling/Attribut !!

Atualmente falta suporte do IE para o seletor css Child, Sibling e Atributo, mas logo que os usuários atualizarem seus navegadores para o IE7, ou melhor ainda, trocarem por outro browser que respeite as especificações (a microsoft não leio algumas linhas da especificação do W3C :-D), então sim teremos os seletores Child, Sibling e Atributo em nosso arsenal.

Imagine uma lista de tags "LI", vamos supor que seja preciso definir um espaço entre cada item da lista, e desejo este espaço apenas entre a tag LI , ou seja LI seguido de LI, e não UL seguido LI ou vice-versa

LI + LI {margin-bottom:5px}

Então, adiciono uma margin embaixo apenas entre dois LI, ou seja, no ultimo LI não há espaço.

<ul>

<li> Limão </li>

<li> Laranja </li>

<li> Acerola </li>

</ul>

O exemplo acima está utilizando o seletor sibling, vamos ver agora um exemplo com o seletor child.

p {color:#000}

div > p {color:#f33}

Aqui apenas o P logo depois da tag DIV vai ter o estilo aplicado , apenas o texto "Marco" vai estar em vermelho, o texto "Moura" fica na cor preta.

<div>

<p>

Marco

<p>

Moura

</p>

</p>

</div>

onde podemos selecionar uma tag atráves de qualquer atributo além do atributo

E por último o seletor Atributo, é comum utilizar em nossa folha de estilo o valor do atributo 'class' como seletor, agora image ter todos os outros atributos a seu dispor, como 'name', 'title', 'alt' ... e qualquer outro atributo , podendo selecionar conforme o seu valor, ou um dentre vários valores.

h1[title] { color: blue; }

 

Example(s):

span[class=example] { color: blue; }

 

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

Moral da história, o CSS possuiu algumas ferramentas que não podemos utilizar e outras muito boas estão chegando ai com o CSS 3, mas infelizmente, devido há restrições impostas por um fabricante de browser não podemos usufruir de todo seu potencial.

Especificação do css 2.1 sobre os seletores

Editado:

Detalhes das mudanças no IE 7 (Inglês)