Saltar navegación

Selector Adxacente

Que é o selector adxacente?

O selector adxacente emprégase para seleccionar elementos que no código HTML da páxina se encontran xusto a continuación doutros elementos. É máis preciso que o selector de irmáns, xa que non selecciona todos os irmáns, so o que vai a continuación.

A súa sintaxe emprega o signo + para separar os dous elementos:

elemento1 + elemento2 {
...
}

Tecnicamente, os elementos que forman o selector adxacente deben cumprir as dúas seguintes condicións:

  • elemento1 y elemento2 deben ser elementos irmáns, polo que o seu elemento pai debe ser o mesmo.
  • elemento2 debe aparecer inmediatamente despois de elemento1 no código HTML da páxina.

Vamos a ver o seguinte exemplo:

Código a incluír no HTMLCódigo a incluír na regra de estilo CSS
 
<h1>
Titulo1 
</h1 > 
<h2>
Subtítulo 1 
</h2>
<h2>
Outro subtítulo 
</h2>
h2 { color: green; }
h1 + h2 { color: red; }

A páxina anterior dispón de dous elementos <h2>, pero só un deles encóntrase inmediatamente despois do elemento <h1> (Subtítulo 1).

Se se quere aplicar diferentes cores en función desta circunstancia, o selector adxacente é o máis axeitado.

Segundo as regras CSS anteriores todos os <h2> da páxina véxanse de cor verde, salvo aqueles <h2> que se encontran inmediatamente despois de calquera elemento <h1>(Subtítulo 1)  e que se amosan de cor vermella.

O seguinte exemplo é moi útil para os textos que se mostran como libros:

p + p {text-indent: 50px;>}

En moitos libros, adoita ser habitual que a primeira liña de todos os parágrafos estea indentada salvo a primeira liña do primeiro parágrafo. Co selector p + p, selecciónanse todos os parágrafos da páxina que estean precedidos por outro parágrafo, polo que non se aplica ao primeiro parágrafo da páxina.

Exemplo...

Exemplo da utilización do selector adxacente

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

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