Que é o selector de irmáns?

O selector de irmáns emprégase para seleccionar os elementos que sexan irmáns.

Este selector que vamos a ver está presente a partir da versión CSS3. A súa sintaxe emprega o signo ~ para separar os dous elementos:

elemento1 ~ elemento2 {
...
}

Tecnicamente, os elementos que forman o selector irmáns deben cumprir so a seguinte condición : elemento1 e elemento2 deben ser elementos irmáns, polo que o seu elemento pai debe ser o mesmo.

Vamos a ver o seguinte exemplo:

Código a incluír no HTML Código a incluír na regra de estilo CSS

Código a incluír no HTML	Código a incluír na regra de estilo CSS
<h1> Titulo1 </h1 > <h2> Subtítulo </h2> <p> Parágrafo 1 </p> <h2> Outro subtítulo </h2>	h1 ~ h2 { color: red; }
A páxina anterior dispón de dous elementos `<h2>` que son irmáns de `<h1>` (o segundo `<h2>` non será adxacente de `<h1>` pero si é irmán). Se queremos aplicar a mesma cor a ambos `<h2>` , o selector de irmáns é o que temos que empregar. Segundo as regras CSS anteriores todos os `<h2>`, como son irmáns de `<h1>`, se amosan de cor vermella.

<h1>

Titulo1

</h1 >

<h2>

Subtítulo

</h2>

<p>

Parágrafo 1

</p>
<h2>

Outro subtítulo

</h2>

h1 ~ h2 { color: red; }

A páxina anterior dispón de dous elementos <h2> que son irmáns de <h1> (o segundo <h2> non será adxacente de <h1> pero si é irmán).

Se queremos aplicar a mesma cor a ambos <h2> , o selector de irmáns é o que temos que empregar.

Segundo as regras CSS anteriores todos os <h2>, como son irmáns de <h1>, se amosan de cor vermella.

Exemplo...

Exemplo da utilización do selector irmán. Diego Rodicio Álvarez. CC BY-SA

Pulsa no botón de abaixo para descargar este exemplo:

Selector de Irmáns

Que é o selector de irmáns?

Exemplo...

Retroalimentación