Questão nº 2
Questão de Desenvolvimento de Sistemas · FGV CGE-SC 2022 (nº 2)
Assinale a opção que apresenta, se for o caso, a diferença entre os seletores CSS `div > p` e `div p`.
- A`div > p` seleciona todos os elementos `<p>` que são filhos diretos de um elemento `<div>`, enquanto `div p` seleciona todos os elementos `<p>` que são descendentes de um elemento `<div>` independentemente do nível de "nesting". (alternativa correta)
- B`div > p` seleciona todos os elementos `<p>` que são irmãos de um elemento `<div>`, enquanto `div p` seleciona todos os elementos `<p>` que são descendentes de um elemento `<div>` independentemente do nível de "nesting".
- C`div > p` seleciona todos os elementos `<p>` que são filhos diretos de um elemento `<div>`, enquanto `div p` seleciona todos os elementos `<p>` que são filhos diretos de um elemento `<div>` independentemente do nível de "nesting".
- D`div > p` seleciona todos os elementos `<p>` que são descendentes de um elemento `<div>`, enquanto `div p` seleciona todos os elementos `<p>` que são filhos diretos de um elemento `<div>` independentemente do nível de "nesting".
- ETanto `div > p` quanto `div p` selecionam todos os elementos `<p>` que são descendentes de um elemento `<div>` independentemente do nível de "nesting".
Resposta comentada
Gabarito Alternativa A
Em CSS, os seletores nos ajudam a escolher quais elementos HTML queremos estilizar. A diferença entre `div > p` e `div p` está em quão "próximo" o elemento `<p>` precisa estar do `<div>` para ser selecionado, ou seja, se ele é um filho direto ou um descendente em qualquer nível.
(A) Correta: `div > p` seleciona os elementos `<p>` que são filhos diretos (imediatamente dentro) de um `<div>`. Já `div p` seleciona qualquer `<p>` que esteja dentro de um `<div>`, não importa se é filho direto, neto, bisneto, etc.
(B) Incorreta: O seletor `>` (filho direto) não seleciona elementos irmãos. Seletores para irmãos são `+` (irmão adjacente) ou `~` (irmão geral).
(C) Incorreta: Esta é a armadilha mais comum. `div p` seleciona todos os elementos `<p>` que são descendentes de um `<div>`, não apenas os filhos diretos. A parte "independentemente do nível de "nesting"" está correta para `div p`, mas a afirmação de que ele seleciona "filhos diretos" é falsa e contraditória com a própria continuação da frase.
(D) Incorreta: Esta alternativa inverte as definições dos dois seletores.
(E) Incorreta: Os dois seletores têm comportamentos distintos e selecionam conjuntos diferentes de elementos.
Fonte: FGV CGE-SC 2022 Auditor do Estado - Ciências da Computação (Caderno Tipo 1). Reproduzida para fins de estudo.