Cuando trabajas con CSS, es bastante habitual que necesites modificar varios elementos que se encuentran al mismo nivel dentro del HTML, y para conseguirlo puedes utilizar los selectores de hermanos de CSS.
Aprender cómo seleccionar todos los hermanos de un elemento con CSS te permitirá crear estilos dinámicos, reducir clases innecesarias y mantener tus hojas de estilo mucho más limpias.
CSS dispone principalmente de dos combinadores destinados a trabajar con elementos hermanos, el selector de hermano adyacente (+) y el selector general de hermanos (~).
En este tutorial vas a descubrir sus diferencias, cómo utilizarlos correctamente y qué alternativas puedes aplicar cuando necesites seleccionar hermanos anteriores o absolutamente todos los elementos relacionados.
¿Qué son los elementos hermanos en CSS? 👨👩👧👦
En HTML se consideran elementos hermanos aquellos que comparten exactamente el mismo elemento padre dentro de la estructura del documento.
Por ejemplo, si tienes varios párrafos incluidos directamente dentro de un mismo <div>, todos esos párrafos serán hermanos entre sí.
<div>
<p>Primer párrafo</p>
<p>Segundo párrafo</p>
<p>Tercer párrafo</p>
</div>
Los tres elementos <p> del ejemplo anterior son hermanos porque dependen directamente del mismo <div>.
Esta relación es importante porque los combinadores CSS de hermanos solamente funcionan entre elementos situados en el mismo nivel jerárquico.
Cómo seleccionar todos los hermanos posteriores con CSS 🎯
La forma más sencilla de seleccionar todos los elementos hermanos situados después de otro elemento consiste en utilizar el combinador general de hermanos ~.
Su estructura básica es la siguiente:
elemento ~ hermano {
propiedad: valor;
}
Este selector indica al navegador que aplique los estilos a todos los elementos que coincidan con hermano, siempre que estén después del primer elemento y compartan el mismo padre.
Por ejemplo, puedes utilizar este HTML:
<div>
<p class="destacado">Primer párrafo</p>
<p>Segundo párrafo</p>
<p>Tercer párrafo</p>
<p>Cuarto párrafo</p>
</div>
Y después escribir el siguiente CSS:
.destacado ~ p {
color: red;
}
Con esta regla, el segundo, tercer y cuarto párrafo cambiarán de color porque son hermanos posteriores del elemento .destacado.
El primer párrafo no será seleccionado porque el operador ~ solamente busca elementos hermanos que aparecen después del elemento utilizado como referencia.
Diferencia entre + y ~ en CSS 🔍
Uno de los errores más frecuentes al trabajar con hermanos consiste en confundir los selectores + y ~, aunque su comportamiento es bastante diferente.
El combinador + selecciona exclusivamente el primer hermano inmediatamente posterior, mientras que ~ permite seleccionar todos los hermanos posteriores compatibles.
Por ejemplo:
.titulo + p {
color: blue;
}
Esta regla solamente afectará al primer <p> situado inmediatamente después de .titulo.
En cambio:
.titulo ~ p {
color: blue;
}
Esta segunda regla afectará a todos los párrafos posteriores que compartan el mismo elemento padre con .titulo.
Puedes consultar más detalles sobre estos combinadores en la documentación de selectores CSS de MDN.
Tabla resumen de selectores de hermanos CSS 📋
| Selector | Qué selecciona | Ejemplo | Elementos afectados |
|---|---|---|---|
A + B | Hermano inmediatamente posterior | .titulo + p | Solo el primer p posterior |
A ~ B | Todos los hermanos posteriores | .titulo ~ p | Todos los p posteriores |
:has() | Permite comprobar relaciones entre elementos | .item:has(~ .activo) | Elementos que cumplen la relación |
:not() | Excluye determinados elementos | .item:not(.activo) | Todos excepto los excluidos |
* | Cualquier tipo de elemento | .activo ~ * | Todos los hermanos posteriores |
Cómo seleccionar cualquier tipo de hermano posterior ⚡
No siempre querrás seleccionar únicamente párrafos, enlaces, listas o elementos pertenecientes a una determinada etiqueta.
Si necesitas seleccionar todos los hermanos posteriores independientemente de su etiqueta HTML, puedes combinar ~ con el selector universal *.
.elemento ~ * {
opacity: 0.5;
}
El selector universal * representa cualquier elemento HTML, por lo que esta regla afectará a cualquier hermano colocado después de .elemento.
Por ejemplo:
<div>
<div class="elemento">Elemento principal</div>
<p>Un párrafo</p>
<span>Un span</span>
<a href="#">Un enlace</a>
</div>
Con .elemento ~ * se seleccionarían el <p>, el <span> y el <a> porque todos son hermanos posteriores del elemento de referencia.
Cómo seleccionar hermanos que tengan una clase concreta 🧩
También puedes limitar el selector para afectar únicamente a los hermanos que tengan una determinada clase CSS.
Por ejemplo:
.activo ~ .item {
background-color: #eee;
}
Esta regla seleccionará todos los elementos .item situados posteriormente a .activo, siempre que ambos compartan el mismo elemento padre.
Este sistema resulta especialmente práctico en menús, acordeones, formularios, galerías, pestañas y listados dinámicos.
Cómo seleccionar todos los hermanos excepto uno 🚫
Otra situación frecuente consiste en querer seleccionar numerosos hermanos pero excluir algún elemento determinado.
Puedes combinar los selectores de hermanos con la pseudoclase :not() para conseguirlo fácilmente.
.elemento ~ *:not(.excluir) {
opacity: 0.5;
}
Con esta regla se seleccionarán todos los hermanos posteriores excepto aquellos que tengan la clase .excluir.
La pseudoclase :not() es especialmente útil cuando quieres crear excepciones sin añadir reglas CSS adicionales.
Puedes encontrar más ejemplos de esta pseudoclase en la documentación de :not() de MDN.
¿Se pueden seleccionar los hermanos anteriores con CSS? 🤔
Tradicionalmente, CSS solamente permitía desplazarse hacia los elementos hermanos posteriores, por lo que seleccionar directamente elementos anteriores resultaba imposible.
La llegada de la pseudoclase :has() ha permitido crear soluciones mucho más avanzadas y comprobar si un elemento tiene determinados hermanos posteriormente.
Imagina este HTML:
<div>
<div class="item">Elemento 1</div>
<div class="item">Elemento 2</div>
<div class="item activo">Elemento 3</div>
</div>
Podrías utilizar:
.item:has(~ .activo) {
opacity: 0.5;
}
Esta regla seleccionará los .item que tengan posteriormente un hermano .activo, consiguiendo en la práctica aplicar estilos a hermanos anteriores.
La pseudoclase :has() ha ampliado enormemente las posibilidades de CSS porque permite crear selectores basados en relaciones que antes solían necesitar JavaScript.
Puedes comprobar su sintaxis y compatibilidad actual en la página dedicada a :has() en MDN.
Cómo seleccionar hermanos paso a paso 🛠️
Para utilizar correctamente los selectores de hermanos en tu proyecto puedes seguir estos pasos:
- Identifica el elemento de referencia desde el que quieres comenzar la selección.
- Comprueba que los elementos que quieres modificar comparten exactamente el mismo padre HTML.
- Utiliza
+cuando solamente necesites seleccionar el hermano inmediatamente posterior. - Utiliza
~cuando quieras seleccionar todos los hermanos posteriores que coincidan con tu selector. - Combina
~con*cuando necesites seleccionar cualquier tipo de elemento posterior. - Añade clases, atributos o pseudoclases cuando necesites filtrar determinados hermanos.
- Utiliza
:has()cuando necesites aplicar estilos dependiendo de la existencia de hermanos posteriores. - Comprueba siempre el resultado mediante las herramientas para desarrolladores del navegador antes de incorporar el código definitivamente a tu web.
Ejemplo práctico para cambiar la opacidad de varios elementos 🎨
Imagina que tienes una lista de tarjetas y quieres reducir la opacidad de todas las tarjetas colocadas después de una determinada tarjeta destacada.
Puedes utilizar este HTML:
<div class="tarjetas">
<div class="tarjeta">Tarjeta 1</div>
<div class="tarjeta destacada">Tarjeta 2</div>
<div class="tarjeta">Tarjeta 3</div>
<div class="tarjeta">Tarjeta 4</div>
</div>
El CSS necesario sería extremadamente sencillo:
.destacada ~ .tarjeta {
opacity: 0.5;
}
Las tarjetas 3 y 4 recibirán una opacidad del 50 %, mientras que las tarjetas anteriores permanecerán sin modificaciones.
Este tipo de técnicas permite crear efectos visuales interesantes sin JavaScript, especialmente cuando las relaciones entre elementos pueden resolverse mediante selectores CSS.
Errores habituales al utilizar el selector ~ ⚠️
Uno de los errores más habituales consiste en pensar que ~ selecciona todos los elementos que aparecen posteriormente en la página, cuando realmente solamente afecta a los hermanos que comparten el mismo padre.
Otro error frecuente es esperar que el selector afecte también a elementos anteriores, algo que ~ por sí solo no puede hacer.
También debes recordar que el segundo selector continúa siendo importante, ya que .elemento ~ p solamente seleccionará párrafos mientras que .elemento ~ * seleccionará cualquier hermano posterior.
Mantener una estructura HTML ordenada te ayudará enormemente a utilizar estos selectores sin recurrir a reglas CSS excesivamente complejas.
¿Cuándo deberías utilizar selectores de hermanos? 💡
Los selectores de hermanos son especialmente útiles cuando quieres aplicar estilos dependiendo de la posición relativa de varios elementos dentro de un mismo contenedor.
Puedes utilizarlos para modificar campos posteriores de un formulario, crear efectos interactivos en menús, diseñar listas, controlar estados visuales o aplicar cambios después de determinados bloques.
Además, combinados con pseudoclases como :hover, :checked, :focus, :not() o :has(), permiten construir interacciones bastante sofisticadas utilizando únicamente CSS.
Antes de recurrir automáticamente a JavaScript, merece la pena comprobar si puedes resolver el comportamiento mediante estos selectores nativos del navegador.
Conclusión ✅
Si quieres seleccionar todos los hermanos posteriores de un elemento con CSS, el selector que probablemente necesitas es el combinador general de hermanos ~.
La sintaxis .elemento ~ .hermano seleccionará todos los .hermano situados posteriormente, mientras que .elemento ~ * permitirá seleccionar cualquier elemento hermano posterior.
Cuando solamente necesites el siguiente elemento deberás utilizar +, y cuando quieras trabajar con relaciones más avanzadas puedes aprovechar las posibilidades que ofrece :has().
Dominar estos selectores te permitirá escribir un CSS más conciso, flexible y mantenible, evitando clases innecesarias y reduciendo en muchos casos la cantidad de JavaScript necesaria.
