Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Seletores avançados.

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Seletores avançados do CSS e atividade Combinando seletores

por Taynan Walace de Souza
| 116.2k xp | 25 posts

Na aula em que tem o vídeo "01 Conhecendo outros seletores do CSS" há uma parte que fala:

"Veja que podemos ainda combinar os seletores:

.noticia > h1 + p

Aqui estamos pegando todos os títulos "h1" dentro da classe ".noticia" e os parágrafos imediatamente depois desses "h1". "

Porém no exercício 07 Combinando seletores - no enunciado "Quais elementos nesse HTML são selecionados pelo seletor article > h1 + p?". Seguindo a lógica do video 01, o certo não seria selecionar todos h1 dentro do article e os parágrafos imediatamente depois desses "h1"?

3 respostas
por Rafael Rollo
| 496k xp | 755 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala Taynan,

.noticia > h1 + p

No caso acima estamos selecionando todo elemento que seja o próximo, e apenas o próximo, "irmão" de um h1 que seja filho direto de qualquer elemento com a classe .noticia.

Ou o próximo p filho de um elemento com classe ".noticia", que vem imediatamente após um h1.

Seguindo esse raciocínio:

article > h1 + p

Aqui estamos selecionando todo elemento p, que vem imediatamente após um h1, que sejam filhos diretos de qualquer article.

Mais detalhes -> https://developer.mozilla.org/pt-BR/docs/Web/CSS/Getting_Started/Seletores#Information_Selectors_based_on_relationships

Espero ter ajudado. Abraço

por Taynan Walace de Souza
| 116.2k xp | 25 posts

Se eu entendi bem, a afirmação "Aqui estamos pegando todos os títulos "h1" dentro da classe ".noticia" e os parágrafos imediatamente depois desses "h1"." está incorreta pois nesse caso selecionaria apenas o primeiro "p" imediatamente após o h1?

Obrigado Rafael

solução!
por Rafael Rollo
| 496k xp | 755 posts
Alura Scuba Team Instrutor e Desenvolvedor

Opa Taynan,

Vou verificar no vídeo e na explicação e providenciar as devidas correções, se necessário. De qualquer maneira já agradeço pelo feedback.

Sobre os seletores seguem aquele padrão abordado acima mesmo.

No exemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        article > h1 + p {
            color: red;
        }
    </style>
</head>
<body>
    <article>
    <h1>Título do artigo</h1>
    <p>por Luiz</p>
    <section>
        <p>Texto inicial do artigo</p>
        <section>
            <h1>Uma subseção</h1>
            <p>Mais texto</p>
        </section>
        <p>Mais texto ainda</p>
    </section>
    <section>
        <h1>Uma seção</h1>
        <p>Texto da seção</p>
    </section>
</article>
</body>
</html>

Temos o resultado:

seletor

Abraço