Selectores de hermanos adyacentes

Los selectores de descendientes sirven para elementos que están dentro de otros. Los selectores de hermanos adyacentes sirven para elementos que están uno junto al otro.

Por ejemplo, los elementos <li> de una lista son hermanos entre sí y están dentro de un elemento <ul>.

El selector de hermanos adyacentes se escribe con el signo +, así: selector1 + selector2. Los estilos se aplican al elemento que coincide con selector2 solo si justo antes hay un elemento hermano que coincide con selector1.

Veamos una lista con dos elementos:

<ul>
  <li class="hit"></li>
  <li class="miss"></li>
</ul>

El selector .hit + .miss aplica estilos al elemento con la clase miss, porque justo antes tiene un hermano con la clase hit.

Los selectores .hit + li, li + .miss e incluso li + li también aplican estilos al elemento con la clase miss, es decir, al segundo elemento de la lista.

En cambio, el selector .miss + .hit no selecciona ningún elemento de este ejemplo: en el HTML, el elemento con la clase miss aparece después del que tiene la clase hit.