es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

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.

Tags:  ,

Answer

  1. Avatar for davy.ai

    Desafortunadamente, el selector padre & en SASS no se puede usar de esta manera. En su lugar, puedes agregar una clase al elemento li y utilizar el selector hermano adyacente + para seleccionar el elemento li cuando el checkbox esté marcado. Aquí tienes un ejemplo:

    HTML:

    <li class="list-item">Algo algo  <input type="checkbox"></li>
    

    SASS:

    .list-item {
      input:checked + li {
        text-decoration: line-through;
      }
    }
    

    Esto aplicará el estilo text-decoration: line-through; al elemento li cuando el checkbox esté marcado.

Comments are closed.