Questão de Programação — Linguagens de programação — INSTITUTO AOCP 2025
Programação›Linguagens de programação
Código
qg540901
Banca
INSTITUTO AOCP
Órgão
MPE-RS
Ano
2025
Nível
Médio
Cargo
Técnico do Ministério Público - Informática
No MPRS, a equipe de desenvolvimento está criando um portal interno de fácil navegação para os membros da instituição. Ao acessar o portal, os usuários poderão navegar entre diversas seções, como “Documentos”, “Processos” e “Atividades”. Para melhorar a usabilidade e facilitar a navegação, a equipe de design deseja que, ao clicar em um link de navegação para uma seção específica, o título dessa seção seja visualmente destacado. O objetivo é chamar a atenção do usuário para a seção à qual ele foi redirecionado. A tarefa do técnico de informática será implementar a estilização correta, utilizando uma pseudoclasse do CSS3 (Cascading Style Sheets, version 3), para que o título da seção receba um destaque assim que o link relacionado for clicado. A pseudoclasse do CSS3 que o técnico deverá utilizar é
A:target
B:before
C:root
D:empty
E:indeterminate
Revelar gabarito e comentário▾
GabaritoA — :target
Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.
Pseudoclasse :target no CSS3
Gabarito: letra A. A pseudoclasse :target do CSS3 é utilizada para estilizar o elemento que é o alvo (âncora) de um link clicado, ou seja, o elemento cujo id corresponde ao fragmento da URL. Quando o usuário clica em um link de navegação que aponta para uma seção específica (ex.: #documentos), o elemento com id="documentos" recebe o destaque definido pela regra :target. As demais alternativas descrevem outras pseudoclasses ou pseudoelementos que não se aplicam a esse cenário.
A pseudoclasse :target faz parte da especificação CSS3 e é uma ferramenta poderosa para melhorar a usabilidade de páginas web, especialmente em portais com navegação interna. Ela permite que o desenvolvedor aplique estilos a um elemento que é o destino de um link, sem a necessidade de JavaScript. O funcionamento é simples: quando um link com um fragmento de URL (como #secao) é clicado, o navegador procura o elemento com o id correspondente (id="secao") e aplica a ele os estilos definidos pela regra :target. Isso é particularmente útil para destacar a seção ativa, como no caso do portal do MPRS descrito no enunciado.
Para entender melhor, considere o seguinte exemplo: um portal com links de navegação para as seções "Documentos", "Processos" e "Atividades". Cada seção possui um id único, como id="documentos", id="processos" e id="atividades". Ao clicar no link "Documentos", a URL muda para #documentos, e o elemento com id="documentos" se torna o alvo. Com a regra CSS #documentos:target { background-color: yellow; }, essa seção receberá um fundo amarelo, chamando a atenção do usuário. Essa técnica é amplamente utilizada em single-page applications e portais para melhorar a experiência de navegação.
É importante distinguir :target de outras pseudoclasses e pseudoelementos. Enquanto :target seleciona o elemento que é o alvo do link, pseudoelementos como ::before e ::after são usados para inserir conteúdo antes ou depois do elemento, e pseudoclasses como :root selecionam a raiz do documento (o elemento <html>). Já :empty seleciona elementos que não têm filhos (nem texto, nem elementos), e :indeterminate é usada para elementos de formulário que estão em estado indeterminado, como checkboxes ou radio buttons que não foram selecionados. A banca explora exatamente essa confusão entre pseudoclasses e pseudoelementos, e entre as diferentes finalidades de cada um.
A pegadinha desta questão está em confundir :target com outras pseudoclasses que parecem relacionadas, mas têm propósitos distintos. O candidato pode ser tentado a escolher :before (que na verdade é ::before), pensando que ele pode ser usado para destacar algo, mas ele é um pseudoelemento que insere conteúdo, não um seletor de alvo. Da mesma forma, :root e :empty são pseudoclasses estruturais, e :indeterminate é específica para formulários. A chave é lembrar que :target é a única que se relaciona diretamente com a navegação por âncoras e o destaque do elemento alvo.
Guarde a fronteira entre :target (alvo de link) e as demais pseudoclasses/pseudoelementos: é exatamente nela que as alternativas se dividem. A alternativa correta é a única que descreve a funcionalidade de destacar a seção após o clique no link.
Pseudoclasses CSS3: :target (Destaca o alvo do link (âncora), Elemento com id = fragmento da URL); :root (Raiz do documento (html), Variáveis CSS globais); :empty (Elemento sem filhos, Sem texto nem elementos); :indeterminate (Formulário em estado indeterminado, Checkbox/radio sem seleção); ::before (pseudoelemento) (Insere conteúdo antes do elemento, Não é pseudoclasse)
Alternativa A — ✅ Correta ⟵ GABARITO
A pseudoclasse :target é a resposta correta. Ela seleciona o elemento que é o alvo de um link de âncora, ou seja, o elemento cujo id corresponde ao fragmento da URL. Quando o usuário clica em um link de navegação para uma seção específica, o elemento com o id correspondente recebe os estilos definidos pela regra :target. Isso atende exatamente ao requisito do enunciado: destacar o título da seção após o clique no link.
Alternativa B — ❌ Incorreta
A alternativa B apresenta :before, que na verdade é o pseudoelemento ::before. Ele é usado para inserir conteúdo antes do elemento selecionado, não para destacar o elemento alvo de um link. Por exemplo, p::before { content: "Nota: "; } insere o texto "Nota: " antes de cada parágrafo. Não tem relação com navegação ou destaque de seção após clique.
Alternativa C — ❌ Incorreta
A alternativa C apresenta :root, que é uma pseudoclasse que seleciona a raiz do documento, ou seja, o elemento <html>. Ela é usada para definir variáveis CSS globais ou estilos base, mas não tem relação com o destaque de uma seção após o clique em um link. Por exemplo, :root { --cor-primaria: #333; } define uma variável CSS global.
Alternativa D — ❌ Incorreta
A alternativa D apresenta :empty, que é uma pseudoclasse que seleciona elementos que não têm filhos, ou seja, que não contêm texto, elementos ou espaços em branco. Por exemplo, p:empty { display: none; } esconde parágrafos vazios. Não tem relação com navegação ou destaque de seção após clique.
Alternativa E — ❌ Incorreta
A alternativa E apresenta :indeterminate, que é uma pseudoclasse usada para selecionar elementos de formulário que estão em estado indeterminado, como checkboxes que não estão marcados nem desmarcados, ou radio buttons que não têm nenhuma opção selecionada. Por exemplo, input[type="checkbox"]:indeterminate { outline: 2px solid red; }. Não tem relação com navegação ou destaque de seção após clique.
NÃO CAIA NESSA!
A banca troca a pseudoclasse :target (que destaca o elemento alvo de um link) por pseudoelementos como ::before e por pseudoclasses estruturais como :root e :empty. O candidato pode confundir :before com uma forma de destacar, mas ele insere conteúdo, não seleciona o alvo. Lembre-se: :target é a única que se relaciona com a navegação por âncoras e o destaque do elemento alvo. Com treino, você enxerga essas trocas de longe 💪