Programação · INSTITUTO AOCP · 2024 | Questão sqc-qg261790

CSS: Pseudoclasse :root

Gabarito: letra C. A pseudoclasse :root do CSS3 aplica estilos ao elemento raiz do documento, que em HTML é o elemento <html>. É a alternativa que descreve corretamente sua função, conforme a especificação do CSS.

A pseudoclasse :root é uma das pseudoclasses estruturais do CSS, que selecionam elementos com base em sua posição ou relação na árvore do documento. Ela é especial porque, em documentos HTML, o elemento raiz é sempre o <html>, o ancestral de todos os outros elementos. Isso significa que :root tem a mesma especificidade de um seletor de tipo (html), mas é semanticamente mais clara e útil para definir variáveis CSS globais, como as custom properties (--var), que podem ser herdadas por todos os elementos do documento.

Na prática, o uso de :root é comum para definir o tema ou as cores padrão de um site:

:root {
  --cor-primaria: #3498db;
  --espacamento-padrao: 16px;
}

Essas variáveis podem então ser usadas em qualquer outro seletor, garantindo consistência e facilidade de manutenção. A distinção importante é que :root não é uma pseudoclasse de estado (como :hover ou :visited), nem de posição entre irmãos (como :first-child ou :last-child), mas sim uma pseudoclasse que identifica o elemento ancestral máximo do documento.

A banca explora a confusão entre as diferentes categorias de pseudoclasses: as estruturais (posição), as de estado (interação do usuário) e as de link. A pegadinha está em reconhecer que :root é uma pseudoclasse estrutural, mas que se refere ao elemento raiz, não a um elemento em uma posição específica entre seus irmãos. Guarde essa distinção: enquanto :first-child e :last-child dependem da posição do elemento dentro do pai, :root é único e não depende de nenhum contexto além do próprio documento.

Alternativa A — ❌ Incorreta

Aplica estilos ao último elemento do seu tipo dentro de seu pai. Esta descrição corresponde à pseudoclasse :last-of-type, que seleciona o último elemento de um tipo específico entre seus irmãos. A banca troca o conceito de "elemento raiz" por "último elemento", explorando a confusão entre pseudoclasses estruturais diferentes.

Alternativa B — ❌ Incorreta

Aplica estilos a elementos do mesmo tipo com base em sua posição. Esta é uma descrição genérica de pseudoclasses estruturais como :first-child, :last-child, :nth-child(), que selecionam elementos com base em sua posição entre irmãos. :root não se encaixa nessa categoria, pois não depende da posição relativa a outros elementos, mas sim do fato de ser o ancestral máximo.

Alternativa C — ✅ Correta ⟵ GABARITO

Aplica estilos ao elemento raiz do documento. Esta é a definição exata da pseudoclasse :root. Em HTML, o elemento raiz é o <html>, e :root permite estilizá-lo diretamente, sendo frequentemente usado para definir variáveis CSS globais. É a única alternativa que descreve corretamente a função da pseudoclasse.

Alternativa D — ❌ Incorreta

Aplica estilos a links que foram visitados anteriormente. Esta descrição corresponde à pseudoclasse :visited, que seleciona links que o usuário já visitou. A banca troca a pseudoclasse estrutural :root por uma pseudoclasse de link, explorando a confusão entre categorias diferentes de pseudoclasses.

Alternativa E — ❌ Incorreta

Aplica estilos quando o ponteiro do mouse está sobre um elemento. Esta descrição corresponde à pseudoclasse :hover, que é uma pseudoclasse de estado, ativada pela interação do usuário. A banca troca :root por :hover, explorando a confusão entre pseudoclasses estruturais e de interação.

NÃO CAIA NESSA!

A banca mistura as categorias de pseudoclasses: estruturais (:root, :first-child), de link (:visited) e de estado (:hover). A chave é identificar que :root é estrutural, mas se refere ao elemento raiz do documento, não a um elemento em posição específica. Memorize as principais pseudoclasses de cada categoria para não cair nessa troca.

PEGA ESSA DICA!

Para diferenciar as pseudoclasses, pergunte-se: "o que ela seleciona?" Se for o elemento raiz, é :root; se for um elemento em posição entre irmãos, é estrutural (:first-child, :nth-child); se for um link em estado, é :link ou :visited; se for interação do usuário, é :hover, :focus, :active. Essa classificação elimina rapidamente as alternativas erradas.

Gabarito: letra C