Exercício: campo com erro destacado e lista zebrada
Um campo de formulário que se destaca sozinho quando tem um erro, e uma lista com listras alternadas, sem nenhuma classe extra no HTML.
Estudar esta lição interativa →Complete o CSS do editor: adicione .campo:has(input:invalid) mudando a border-color para uma cor de alerta; e adicione .lista li:nth-child(even) dando um background diferente às linhas pares.
.campo precisa de uma regra :has(input:invalid) (ou :has(input:user-invalid), que só marca depois que a pessoa mexeu no campo) com border-color diferente; .lista li precisa de nth-child(even) (ou 2n) com background diferente.
.campo{
border: 2px solid #cbd5e1;
padding: 10px;
}
/* sua vez: adicione .campo:has(input:invalid) com border-color de alerta */
.lista li{
padding: 6px 10px;
}
/* sua vez: adicione .lista li:nth-child(even) com um background diferente */
🧩 Este é um exercício com correção automática — abra no app para completá-lo e verificar.