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 que são filhos diretos de um elemento , enquanto "div p" seleciona todos os elementos que são descendentes de um elemento independentemente do nível de "nesting".
Correta: "div > p" seleciona somente filhos diretos, enquanto "div p" seleciona qualquer descendente de uma .
- B)"div > p" seleciona todos os elementos que são irmãos de um elemento , enquanto "div p" seleciona todos os elementos que são descendentes de um elemento independentemente do nível de "nesting".
Errada: "div > p" não pega irmãos de , e sim filhos diretos de .
- C)"div > p" seleciona todos os elementos que são filhos diretos de um elemento , enquanto "div p" seleciona todos os elementos que são filhos diretos de um elemento independentemente do nível de "nesting".
Errada: o seletor com espaço não exige que o seja filho direto, basta ser descendente.
- D)"div > p" seleciona todos os elementos que são descendentes de um elemento , enquanto "div p" seleciona todos os elementos que são filhos diretos de um elemento independentemente do nível de "nesting".
Errada: a relação foi invertida, pois "div > p" não é o seletor de descendentes e "div p" não é restrito a filhos diretos.
- E)Tanto "div > p" quanto "div p" selecionam todos os elementos que são descendentes de um elemento independentemente do nível de "nesting".
Errada: os dois seletores não são equivalentes, porque um é mais restrito e o outro alcança qualquer nível de descendência.
Gabarito: A
A diferença aqui é a relação entre os elementos no DOM. O seletor com o sinal de maior, "div > p", é mais restrito: ele pega apenas os elementos que são filhos diretos de uma . Já o seletor com espaço, "div p", é mais amplo: ele pega qualquer que esteja dentro de uma , seja filho direto ou em qualquer nível de descendência. Em CSS, isso é um clássico de prova, porque a banca adora trocar uma relação de hierarquia por outra e ver quem escorrega no detalhe. Pense assim: "filho direto" é como um nível imediato da árvore; "descendente" é qualquer elemento abaixo, sem se preocupar quantos degraus existam entre eles. Então, se houver uma com um dentro e, lá dentro, um , o seletor "div p" vai encontrar esse , mas "div > p" não. Por isso, o gabarito A está correto: ele descreve exatamente a diferença entre seletor de filho direto e seletor de descendente. Não há pegadinha técnica mais profunda aqui, é CSS puro e simples, com aquela maldade elegante de concurso: um símbolo muda tudo. Em termos de doutrina de front-end, isso é regra básica da linguagem CSS, sem necessidade de fundamento legal ou jurisprudencial, pois não se trata de tema jurídico.