Aplicar estilos al elemento padre utilizando sass
Digamos que tengo esta estructura:
<li>Algo algo <input type="checkbox"></li>
¿Cómo podría aplicar un text-decoration: line-through;
a la marca de la lista li
cuando el checkbox está marcado?
Intenté esto sin éxito usando el selector &
de Sass:
li {
& input:checked {
text-decoration: line-through;
}
}
EDITAR:
Agradezco todas las respuestas, sin embargo, estaba buscando hacer esto usando Sass. Pensé que el selector de padres &
tenía esta funcionalidad, pero después de investigar un poco, descubrí que no está destinado a ser usado de esa manera.
No obstante, encontré una solución sin modificar mi estructura ni agregar JavaScript. Descubrí que Bootstrap no te limita a colocar el checkbox después del contenido de la li
para mostrarlo en la posición correcta, puedes colocarlo antes y automáticamente lo coloca a la derecha, así que hice eso y coloqué el contenido de la li
dentro de un span
, por lo que solo seleccioné input:checked + span
que me dio el resultado deseado.
davy.ai
Desafortunadamente, el selector padre
&
en SASS no se puede usar de esta manera. En su lugar, puedes agregar una clase al elementoli
y utilizar el selector hermano adyacente+
para seleccionar el elementoli
cuando el checkbox esté marcado. Aquí tienes un ejemplo:HTML:
SASS:
Esto aplicará el estilo
text-decoration: line-through;
al elementoli
cuando el checkbox esté marcado.