Em CSS3, quando se deseja aplicar estilos a elementos que s...

A alternativa correta é a A - Descendente direto (>).

Vamos entender o porquê:

Em CSS3, o seletor descendente direto (>) é utilizado para aplicar estilos apenas aos elementos que são filhos diretos de um elemento pai específico, garantindo que os estilos não sejam aplicados a elementos aninhados mais profundamente.

Por exemplo, se tivermos o seguinte código HTML:

<div class="pai">
    <p>Parágrafo 1</p>
    <div>
        <p>Parágrafo 2</p>
    </div>
</div>

E quisermos aplicar um estilo apenas ao parágrafo que é filho direto da div com a classe "pai", utilizamos o seletor:

.pai > p {
    color: blue;
}

Dessa forma, apenas o "Parágrafo 1" será estilizado em azul, enquanto o "Parágrafo 2" não será afetado, pois ele não é um filho direto da div com a classe "pai".

Agora, vamos analisar as alternativas incorretas:

B - Irmãos adjacentes (+): Este seletor é usado para selecionar o elemento que é imediatamente precedido por um elemento especificado. Por exemplo, "A + B" seleciona todo elemento B que é imediatamente precedido por um elemento A. Este seletor não se aplica a filhos diretos, mas sim a elementos irmãos.

C - Classe (.classname): O seletor de classe é utilizado para aplicar estilos a elementos que possuem uma determinada classe. Enquanto é muito útil, ele não se restringe apenas aos filhos diretos de um elemento pai. Portanto, ele não é adequado para a situação descrita.

D - ID (#idname): O seletor de ID aplica estilos a um único elemento que possui o ID especificado. Assim como o seletor de classe, ele não se limita apenas aos filhos diretos de um elemento pai, não sendo apropriado para a questão.

Portanto, ao resolver questões de concursos públicos sobre seletores CSS, é essencial entender a função específica de cada seletor e como eles interagem com a estrutura do HTML. Nesse caso, a alternativa A é correta porque o seletor ">" garante que os estilos sejam aplicados apenas aos filhos diretos de um elemento pai.

GAB. A - Descendente direto

Descendente direto > (filhos diretos)

Ex:

HTML

<div>

  <p>1º parágrafo</p>

  <p>2º parágrafo</p>  

</div>

CSS

div > p {

 color: blue;

}

resultado:

1º parágrafo

2º parágrafo

===============

Irmãos adjacentes + (pega o primeiro elemento irmão)

HTML

<div>

 <p>1º parágrafo</p> 

 <h1>Título h1</h1> //vai pegar esse (p + h1)

 <h1>Título h1</h1>

</div>

<h2>Titulo h2<h2> //vai pegar esse (div + h2)

<h2>Titulo h2<h2>

CSS

p + h1{

 color: blue;

}

div + h2 {

 color: red;

}

resultado:

1º parágrafo

Título h1

 Título h1

Título h2

 Título h2

===============

Seletor geral de irmãos ~

HTML

<div>

  <p>1º parágrafo</p>  

</div>

<h2>Titulo h2<h2>

<h2>Titulo h2<h2>

CSS

div ~ h2{

 color: red;

}

resultado:

1º parágrafo

Título h2

 Título h2

/**************************************

Seletor universal --> todo o doc

* {

border: 1px solid red;

}

/**************************************

Seletor de texto --> todo h1

h1 {

color: green;

}

/**************************************

Seletor de classe

.verde {

color: green;

}

/**************************************

Seletor de classe --> todos os parágrafos 

p.verde {

color: green;

}

**************************************

Seletor de ID

#cabecalho {

border: 1px solid blue;

}

**************************************

Seletor de filho --> lnks a que estão dentro de li(diretamente se tiver 

dentro de uma span dentro de li não funciona)

li>a {

color: red;

text-decoration: none;

}

**************************************

Seletor de descendente --> links que estão entro de paragrafos, não precisa de direto

p a {

color: green;

}

**************************************

Seletor de irmão adjacente --> formata o p depois de h1, se for acima não formata

h1+p {

color: red;

}

**************************************

Seletor de irmão geral*/

h1~p {

color: pink;

}