Mostrar/Esconder Divs com Radio Buttons: CSS :has() Substitui JS

Em 2015, respondi uma pergunta no Stack Overflow em Português sobre mostrar ou esconder seções de conteúdo com base no radio button selecionado. Recebeu 4 votos.

A Abordagem de 2015: Evento change do jQuery

<input type="radio" name="plano" value="basico" /> Básico
<input type="radio" name="plano" value="pro" /> Pro

<div id="basico-details">Conteúdo plano básico</div>
<div id="pro-details" style="display:none">Conteúdo plano pro</div>

$('input[name="plano"]').on('change', function () {
  $('#basico-details, #pro-details').hide();
  $('#' + this.value + '-details').show();
});

Funciona bem. Padrão jQuery de exibição condicional de 2015.

A Abordagem de 2026: CSS :has() — Zero JavaScript

O seletor :has(), agora suportado em todos os navegadores principais, permite estilizar um elemento baseado no que ele contém:

<form>
  <input type="radio" name="plano" id="basico" value="basico" />
  <label for="basico">Básico</label>
  <input type="radio" name="plano" id="pro" value="pro" />
  <label for="pro">Pro</label>

  <div class="painel" id="basico-details">Conteúdo plano básico</div>
  <div class="painel" id="pro-details">Conteúdo plano pro</div>
</form>

/* Esconder todos os painéis por padrão */
.painel {
  display: none;
}

/* Mostrar painel básico quando radio básico está marcado */
form:has(#basico:checked) #basico-details {
  display: block;
}

/* Mostrar painel pro quando radio pro está marcado */
form:has(#pro:checked) #pro-details {
  display: block;
}

Sem JavaScript. Sem event listeners. O navegador trata o show/hide reativamente.

Conclusão

Em 2015, exibição condicional exigia JavaScript. Em 2026, CSS :has() trata visibilidade baseada em estado reativamente. O padrão jQuery ainda funciona perfeitamente — mas se quer zero JS, a plataforma finalmente suporta nativamente.