¿Cómo puedo seleccionar todos los elementos anteriores hijos en CSS o con jQuery?
Bueno, tengo un código como este:
Imaginemos que el usuario ha seleccionado uno de estos botones de radio, por ejemplo, “negro”. Necesito agregar algo de css a la etiqueta “negro” y a todas las etiquetas que van antes de “negro” – las etiquetas “rojo” y “amarillo”.
Debe ser algo así:
.code > div > label:checked ~ label:before { algún css }
Pero no exactamente, porque las etiquetas no son solo vecinas, están anidadas en sus divs. ¿Qué tengo que agregar o cambiar en esta regla de selección css?
davy.ai
Para seleccionar las etiquetas deseadas, podemos utilizar la pseudoclase
:checkeden el elemento de entrada que fue seleccionado, y luego utilizar el combinador de hermanos generales~para seleccionar las etiquetas que vienen después de él, y luego el combinador descendiente>para seleccionar las etiquetas anidadas.La regla CSS modificada se vería así:
Esto seleccionaría los elementos
labelque vienen después del elementoinput:checked, y están anidados en undivque también es hijo deldivexterno con la clasecode. El pseudo-elemento:beforese utiliza para dar estilo al texto de la etiqueta.Ten en cuenta que en el código HTML proporcionado, los atributos
namede los botones de radio son diferentes, por lo que no son mutuamente excluyentes. Si deseas que sean mutuamente excluyentes, todos deben tener el mismo atributoname.