CSS3 – Seletores de combinação irmão em geral
Postado por: Pedro Rogério emO seletor de combinação irmão em geral é representado pelo sinal “til” (U+007E, ~), que separa 2 sequências de seletores simples. Os elementos representados pelas 2 sequências compartilham do mesmo pai na árvore do documento, e o elemento representado pela 1ª sequência precede, não necessariamente nessa ordem, o elemeno representado pelo segundo.
Ficaram meio confusos? Mas a lógica é fácil. Tomem como exemplo o seguinte CSS:
h1 ~ pre {border:1px dotted red;}
Representa um elemento pre que segue um elemento h1, que no HTML pode ser escrito dessa forma:
<h1>Definição da função a</h1>
<p>Função a(x) é aplicada a todas as figuras da tabela.</p>
<pre>function a(x) = 12x/13.5</pre>
Vejam no exemplo que só a tag pre ficou com uma borda vermelha, independente de sua posição, desde que as tags compartilhem o mesmo pai. Testado e aprovado no IE7, Mozila, Opera, Konqueror e Safari.
Referências
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
SHOW!
=D
IECA 6 não funga = nada feito
:( infelizmente o povo inda usa mais ieca 6
é, mais ele disse que só no IE7, Mozila, Opera e Safari que funcionam.
Pelo menos no IE7 funciona! Isso é um avanço!
Essa pseudo-classe pode ser utilizada para fazer uma “frescurinha” que só irá aparecer aos usuários de Browsers de verdade. Quem utiliza o IE6, infelizmente, não vai ver o efeito, mas terá acesso ao conteúdo.
@Vítor,
Com certeza, você não pode agora é ficar limitando seu conhecimento por culpa de usuários que ainda utilizam um browser ultrapassado.
Seria muito útil se funcionasse no IE =D