0

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);
}

2
  • Já tentou label:has(.checkInput:checked) ~ p? Commented 3/01/2023 às 0:44
  • 1
    Muito obrigado de verdade, deu certo !! Commented 3/01/2023 às 2:05

1 Resposta 1

-2

label:has(.checkInput:checked) ~ p

Funcionou

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .