Questão de Programação — Programação de front end — INSTITUTO AOCP 2025

CSS3: Pseudoclasse :empty

Gabarito: letra A. A pseudoclasse :empty do CSS3 é usada para selecionar elementos que não possuem filhos, incluindo nós de texto — exatamente o requisito do enunciado: destacar itens de lista de cursos que não possuem subitens. As demais alternativas (:required, :visited, :focus, :hover) são pseudoclasses com outras finalidades, ligadas a formulários, links e interação do usuário.

As pseudoclasses do CSS são seletores que aplicam estilos a elementos com base em um estado ou condição, sem necessidade de adicionar classes ou IDs no HTML. Elas são fundamentais para criar interfaces dinâmicas e responsivas, como no caso do portal do IFMS. A pseudoclasse :empty é uma das chamadas pseudoclasses estruturais, que selecionam elementos com base em sua posição ou conteúdo na árvore do documento.

A regra central é: :empty seleciona qualquer elemento que não tenha nenhum filho, seja ele um elemento HTML, um nó de texto (mesmo um espaço em branco) ou um comentário. Na prática, um elemento como <li></li> (sem conteúdo) é considerado vazio e será estilizado; já <li>Curso de Informática</li> não é vazio, pois contém texto. Isso é útil para destacar itens simples, sem subitens, como pede o enunciado.

Vale destacar a diferença entre :empty e outras pseudoclasses estruturais, como :first-child ou :nth-child(). Enquanto estas selecionam por posição entre irmãos, :empty seleciona por ausência de conteúdo. Além disso, é importante não confundir :empty com :blank (que ainda é experimental e considera apenas espaços em branco como vazios) — :empty é a mais consolidada e a que a banca cobra.

A pegadinha desta questão está em associar a ideia de "elementos sem subitens" a pseudoclasses de interação (:hover, :focus) ou de formulário (:required), quando na verdade o requisito é estrutural. O candidato que não conhece :empty tende a escolher :hover por ser a mais comum, mas ela não tem relação com a ausência de filhos.

Guarde o critério: a questão pede uma pseudoclasse que identifique elementos sem filhos — isso é :empty. As demais alternativas tratam de estados de interação ou de formulário, que não se aplicam ao contexto de listas de cursos.

Alternativa A — ✅ Correta ⟵ GABARITO

A pseudoclasse :empty é exatamente a que estiliza elementos sem filhos, incluindo nós de texto. No contexto do enunciado, ela permite destacar itens de lista que não possuem subitens, como <li></li>. É uma pseudoclasse estrutural do CSS3, amplamente suportada pelos navegadores modernos.

Alternativa B — ❌ Incorreta

:required é uma pseudoclasse de formulário, que seleciona campos de entrada (<input>, <select>, <textarea>) que possuem o atributo required. Não tem relação com a ausência de filhos em elementos de lista. O candidato pode confundir por ser uma pseudoclasse de estado, mas ela se aplica apenas a elementos de formulário.

Alternativa C — ❌ Incorreta

:visited é uma pseudoclasse de link, que seleciona links (<a>) que já foram visitados pelo usuário. Não se aplica a elementos de lista nem à ausência de filhos. É uma pseudoclasse de estado de navegação, não estrutural.

Alternativa D — ❌ Incorreta

:focus é uma pseudoclasse de interação, que seleciona o elemento que está recebendo foco do teclado ou do mouse (como um campo de formulário ou um link). Não tem relação com a estrutura do elemento, apenas com o estado de foco. No contexto de listas, não é usada para destacar itens sem subitens.

Alternativa E — ❌ Incorreta

:hover é a pseudoclasse mais conhecida, aplicada quando o usuário passa o mouse sobre o elemento. Ela é usada para efeitos dinâmicos de interação, mas não seleciona elementos por ausência de filhos. O enunciado pede uma seleção estrutural, não baseada em interação.

Gabarito: letra A — a pseudoclasse :empty é a única que atende ao requisito de estilizar elementos sem filhos, incluindo nós de texto.