Usando :has no css

artigo

Usando :has no css

Publicado em: 05/04/2023
avatar do autor
By Wagner Silva
/wagstalos

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;

}

Screenshot_3.jpg

---------------------------

veja o exemplo exemplo: https://codepen.io/wagstalos/pen/zYMmwXB

fonte: mozilla