A instrução CSS3 div + p {background-color: blue;} aplica a ...
Gabarito comentado
Confira o gabarito comentado por um dos nossos professores
Gabarito: Alternativa A - imediatamente após o elemento <div>
.
Vamos explorar o que a questão aborda e o porquê da alternativa A ser a correta.
O seletor CSS div + p é conhecido como o seletor de irmãos adjacentes. Ele seleciona o elemento que é imediatamente precedido pelo primeiro elemento, desde que ambos compartilhem o mesmo elemento pai. No caso do seletor div + p
, ele está direcionando seu estilo para qualquer elemento <p>
que esteja diretamente após um elemento <div>
, no mesmo nível de hierarquia, ou seja, irmãos adjacentes.
Essa regra de estilo não se aplica a parágrafos <p>
que estão dentro de uma <div>
(opção B), que estariam próximos mas não imediatamente após <div>
(opção C), que estariam antes de uma <div>
(opção D), ou que fossem filhos de uma <div>
(opção E). A única situação em que a regra se aplica é quando o <p>
é um irmão adjacente que segue imediatamente após o <div>
, justificando a alternativa correta A.
Compreender seletores CSS é fundamental para estilizar as páginas web com precisão. O seletor de irmãos adjacentes é particularmente útil para casos onde você deseja aplicar estilos a elementos que seguem diretamente após um outro elemento específico, permitindo um controle mais refinado do layout sem a necessidade de classes ou IDs adicionais.
Clique para visualizar este gabarito
Visualize o gabarito desta questão clicando no botão abaixo
Comentários
Veja os comentários dos nossos alunos
< !DOCTYPE html >
< html>
< head>
< style>
h1 {
background-color: green;
}
div {
background-color: red;
}
p {
background-color: blue;
}
< /style>
< /head>
< body>
< h1>CSS background-color example!< /h1>
< div>
This is a text inside a div element.
< p>This paragraph has its own background color.< /p>
We are still in the div element.
< /div>
< /body>
< /html>
div + p { } - Selecione e estilize todos os elementos
que são colocados imediatamente após os elementos
h1, p { } - Selecione e estilize todos os elementos
E todos os elementos
div p { } - Selecione e estilize todos os elementos
que estão dentro dos elementos
div > p { } - Selecione e estilize cada elemento
em que o pai é um elemento
a-
CSS element+element Selector
Select and style every <p> element that are placed immediately after <div> elements:
div + p {
background-color: yellow;
}
https://www.w3schools.com/cssref/sel_element_pluss.asp
Clique para visualizar este comentário
Visualize os comentários desta questão clicando no botão abaixo