artigo
Usando :has no css
Publicado em: 05/04/2023
A pseudoclasse CSS funcional :has() representa um elemento se qualquer um dos seletores relativos que são passados como um argumento corresponder a pelo menos um elemento quando ancorado nesse elemento. Essa pseudoclasse apresenta uma maneira de selecionar um elemento pai ou um elemento irmão anterior em relação a um elemento de referência, usando uma lista de seletores relativa como argumento.
Veja o exemplo que fiz:
html:
<form action="">
<label>
<input type="checkbox">
Ative para ficar vermelho
</label>
</form>
CSS:
label:has([type='checkbox']:checked){
color:red;
}
---------------------------
veja o exemplo exemplo: https://codepen.io/wagstalos/pen/zYMmwXB
fonte: mozilla