Te damos la bienvenida a proyecto on line, ahora hallarás la solucíon que necesitas.
Solución:
No, no hay selector de “hermano anterior”.
En una nota relacionada, ~ es para hermano sucesor general (lo que significa que el elemento viene después de este, pero no necesariamente inmediatamente después) y es un selector de CSS3. + es para el próximo hermano y es CSS2.1.
Consulte Combinador de hermanos adyacentes de Selectors Level 3 y 5.7 Selectores de hermanos adyacentes de Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.
Encontré una manera de diseñar a todos los hermanos anteriores (opuesto a ~) que puede funcionar dependiendo de lo que necesites.
Digamos que tiene una lista de enlaces y al pasar el mouse sobre uno, todos los anteriores deberían volverse rojos. Puedes hacerlo así:
/* default link color is blue */
.parent a
color: blue;
/* prev siblings should be red */
.parent:hover a
color: red;
.parent a:hover,
.parent a:hover ~ a
color: blue;
Selectores nivel 4 introduce :has() (anteriormente el indicador de asunto !) que le permitirá seleccionar un hermano anterior con:
previous:has(+ next)
… pero al momento de escribir, está un poco más allá de la vanguardia para el soporte del navegador.