Eu queria conseguir estilizar a tag <p>
da minha tarefa quando meu checkbox estiver com checked
. Só que não estou conseguindo seleciona-lá.
HTML:
<article className={styles.task}>
<label htmlFor={id} className={styles.checkboxContainer}>
<input type="checkbox" className={styles.checkInput} id={id} />
<span className={styles.checkmark}></span>
</label>
<p> {content} </p>
<BsTrash size={20} />
</article>
A forma como tentei estilizar foi essa
CSS:
.task {
display: grid;
grid-template-columns: 50px 1fr 50px;
justify-items: start;
text-align: left;
width: 100%;
background-color: var(--gray-500);
padding: 2rem;
border-radius: 8px;
border: 1px solid var(--gray-400);
}
.task p {
color: var(--gray-300);
}
.checkInput:checked ~ p {
color: var(--gray-700);
}
.task svg {
cursor: pointer;
transition: color 0.2s;
}
.task svg:hover {
color: var(--red);
}
label:has(.checkInput:checked) ~ p
?