Ir para conteúdo / Skip to content

CSS3 - SELETORES DE COMBINAÇÃO IRMÃO EM GERAL

Postado em: 14 de setembro de 2007 por Pedro Rogério

O 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

Isso pode lhe interessar:

Deixe seu comentário

6 comentários para esse post

  1. Allan disse: 14.09.07 ás 08:55
    #1

    SHOW!
    =D

  2. VitorGGA disse: 14.09.07 ás 09:05
    #2

    IECA 6 não funga = nada feito
    :( infelizmente o povo inda usa mais ieca 6

  3. carlos disse: 14.09.07 ás 10:19
    #3

    é, mais ele disse que só no IE7, Mozila, Opera e Safari que funcionam.

  4. Vitor disse: 14.09.07 ás 13:42
    #4

    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.

  5. Pedro Rogério disse: 14.09.07 ás 14:08
    #5

    @Vítor,

    Com certeza, você não pode agora é ficar limitando seu conhecimento por culpa de usuários que ainda utilizam um browser ultrapassado.

  6. Matheus disse: 14.09.07 ás 14:57
    #6

    Seria muito útil se funcionasse no IE =D

Deixe seu comentário