Questão de Programação — Linguagens de marcação — FGV 2023
Programação›Linguagens de marcação
Código
fg073212
Banca
FGV
Órgão
TJ-SE
Ano
2023
Nível
Médio
Cargo
Técnico Judiciário - Especialidade - Programação de Sistemas
Júlia está formatando as páginas do site da empresa, com uso de CSS3, e a regra estabelecida é a de que o primeiro elemento de cada lista HTML deve utilizar fonte vermelha.Para executar essa regra, Júlia deve utilizar a formatação:
Ali::first-line {color:red};
Bli:first-child {color:red};
Cul li {color:red};
Dul:first-child {color:red};
Eli:nth-of-type(2) {color:red}.
Revelar gabarito e comentário▾
GabaritoB — li:first-child {color:red};
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”.
CSS3 – Seletores pseudo-classe e pseudo-elemento
Gabarito: letra B. O seletor li:first-child aplica a regra ao primeiro elemento filho de cada lista, ou seja, ao primeiro <li> de cada <ul> ou <ol>. É exatamente o que a regra pede: "primeiro elemento de cada lista HTML". As demais opções ou afetam todos os itens, ou selecionam o primeiro de outro contexto, ou usam pseudo-elementos que não selecionam elementos.
NÃO CAIA NESSA!
A banca troca seletor de pseudo-classe (:first-child) por pseudo-elemento (::first-line) e por posições erradas (nth-of-type(2), ul:first-child). O aluno deve lembrar que :first-child seleciona o primeiro filho do pai, independentemente do tipo, mas como o pai é a lista e o filho é o <li>, funciona perfeitamente para selecionar o primeiro item. Já ::first-line atua sobre a primeira linha de texto, não sobre o primeiro elemento.
Alternativa A — ❌ Incorreta
li::first-line é um pseudo-elemento que estiliza a primeira linha de um elemento de bloco, e não o primeiro elemento filho. Não atende ao requisito.
Alternativa B — ✅ Correta ⟵ GABARITO
li:first-child é a pseudo-classe que seleciona todo elemento <li> que seja o primeiro filho de seu pai (a lista). Como cada lista tem pelo menos um <li>, o primeiro de cada lista recebe a cor vermelha.
Alternativa C — ❌ Incorreta
ul li é um seletor descendente que seleciona todos os <li> dentro de <ul>, não apenas o primeiro. Aplicaria a cor vermelha a todos os itens da lista.
Alternativa D — ❌ Incorreta
ul:first-child seleciona um elemento <ul> que seja o primeiro filho de seu pai, não os itens da lista. Se a primeira tag na página for uma <ul>, ela seria estilizada, mas a regra pede o primeiro item dentro de cada lista.
Alternativa E — ❌ Incorreta
li:nth-of-type(2) seleciona o segundo elemento <li> de cada lista (índice 2), não o primeiro. Isso tornaria vermelho o segundo item, contrariando a regra.