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:
- A)li::first-line {color:red};
Errada, porque ::first-line aplica estilo à primeira linha de texto de um elemento, e não ao primeiro item de uma lista.
- B)li:first-child {color:red};
Certa, porque :first-child seleciona o primeiro filho do elemento pai, o que corresponde ao primeiro item da lista.
- C)ul li {color:red};
Errada, porque ul li seleciona todos os itens de lista dentro de ul, sem destacar apenas o primeiro.
- D)ul:first-child {color:red};
Errada, porque ul:first-child exigiria que a própria ul fosse o primeiro filho do seu pai, o que não tem relação com o primeiro item da lista.
- E)li:nth-of-type(2) {color:red}.
Errada, porque li:nth-of-type(2) seleciona o segundo li, e não o primeiro.
Gabarito: B
Quando a questão fala em "o primeiro elemento de cada lista HTML", ela está apontando para o primeiro filho dentro do seu elemento pai, não para a primeira linha de texto nem para o primeiro item em geral de qualquer lugar da página. Em CSS3, isso é feito com a pseudo-classe :first-child, que seleciona o elemento que é o primeiro filho do seu pai. Na prática, se você tem uma lista com vários , o primeiro dentro de cada ou pode receber a regra de cor vermelha. Por isso, a forma correta é aplicar o seletor ao item que ocupa a primeira posição entre os irmãos. O gabarito B está certo porque li:first-child seleciona o que é o primeiro filho do seu elemento pai. Se esse estiver dentro de uma lista, ele será justamente o primeiro item da lista, atendendo ao enunciado. As demais alternativas confundem pseudo-elementos, posição do texto, descendência e ordem do tipo de elemento. Em questão de CSS, a banca gosta bastante dessa troca de conceitos, então vale guardar: primeiro filho = :first-child; primeiro texto da linha = ::first-line.