Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Não entendi a explicação de uma atividade

No curso 4 de HTML e CSS, na parte 4 desse curso, na atividade 3 tem uma questão que pede para selecionar o último

. Eu entendi tranquilo que a resposta certa é a letra B, porém, não entendi a explicação do pq a letra A está errada.

section~ h2 Alternativa errada! Desta forma, não selecionamos nenhum dos h2. Não existem h2 irmãos diretos da section.

O ~ não faz o papel de selecionar TODOS, após alguma coisa? Pq então a explicação diz que ele não iria selecionar nenhum? Nesse caso, ele selecionaria todos os h2 que vem após a section, não? Eu sei que a questão só pede o último h2, minha dúvida é só nessa explicação mesmo, porque não tá fazendo sentindo, pra mim.

2 respostas

Você pode especificar melhor? Não da para saber o contexto. Copie e cole a pergunta ;)

solução!

Olá Bárbara, tudo bem?

Na verdade, o seletor ~ possui o papel de selecionar dois elementos que atuam como irmãos e compartilham do mesmo pai. No entanto, há uma exigência em relação a ordem desses elementos, ou seja, o elemento que estiver após o ~, também deverá vir após o seu elemento irmão no arquivo HTML. Veja no exemplo abaixo:

  • No arquivo CSS:
section ~ h2
  • No arquivo HTML:
<main> <!--pai do section e h2-->
    <section> <!--irmão do h2-->
    <h2> <!--irmão do section -->
        <p> <!--filho de h2-->

A alternativa A está incorreta, pois além do fato do exercício estar pedindo o último <h2> , é possível notar que essa exigência de ordem do seletor não é aplicada. Observe:

  • No HTML:

    <h2> <!--é irmão do section, porém vem antes dele -->
    <section>
      <h2>
      <p>
      <p>
      <h2>
  • No CSS:

    section ~ h2

Como o único irmão do section vem antes dele, então dizemos que não existem irmãos diretos e o seletor ~ não é aplicado em nenhum <h2>. Sendo assim, para que isso tivesse ocorrido, o section precisaria ter um irmão que estivesse após o mesmo. Além disso, ele também não selecionará o último <h2>, pois ele atua como filho do section e não irmão.

Caso queira estudar de forma mais aprofundada sobre esse seletor, segue a indicação de leitura.

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!