Selector adyacente en CSS

El selector adyacente + permite seleccionar un elemento por su vecino inmediato superior.

Sintaxis

cssselector1 + selector2 {
  
}

Ejemplo

Apliquemos a todas las etiquetas p que se encuentren inmediatamente después de las etiquetas h2 y coloreémoslas en rojo:

html<h2>texto</h2>
<p>
  +
</p>
<p>
  -
</p>
<p>
  -
</p>

cssh2 + p {
  color: red;
}

Результат:

Ejemplo

Apliquemos a todas las etiquetas p que se encuentren inmediatamente después de elementos con la clase .test y coloreémoslas en rojo:

html<p class="test">
  texto
</p>
<p>
  +
</p>
<p>
  -
</p>

css.test + p {
  color: red;
}

Результат:

Ejemplo

Apliquemos a todos los elementos con la clase .elem que se encuentren inmediatamente después de elementos con la clase .test y coloreémoslos en rojo:

html<p class="test">
  texto
</p>
<p class="elem">
  +
</p>
<p>
  -
</p>

css.test + .elem {
  color: red;
}

Результат:

Véase también