Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

DUVIDA DE SELETORES

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

por Victor Nunes Saboia
| 136.6k xp | 73 posts
.post-blog + .post-blog {
    padding-top: 1em;
    margin-top: 1.5em;
    background-image: linear-gradient(to right, 
        rgba(200, 200, 200, 0), 
        rgba(200, 200, 200, 1), 
        rgba(200, 200, 200, 0)
    );
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top center;
}

No meu código original eu tenho 3 post-blog.Sendo que ele seleciona apenas o segundo ,certo? Ai ele aplica a borda na parte de cima do segundo post-blog,mas quando eu fui para a pagina...ele aplicou isso também para o 3 post-blog.O "+" não era para selecionar apenas o segundo não?!

1 resposta
solução!
por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Boa noite, Victor! Como vai?

Esse seletor pegará o segundo e o terceiro mesmo! Isso ocorre pq o + faz com que sejam selecionados todos os elementos .post-blog que venham exatamente após um elemento .post-blog. Sendo assim, como o segundo .post-blog vem após o primeiro e o terceiro .post-blog vem após o segundo, ambos (segundo e terceiro) são selecionados e recebem as regras de CSS estipuladas.

Exemplo prático:

<div class="post-blog">
     Não vem depois de nenhum elemento .post-blog, então não é selecionada!
</div>
<div class="post-blog">
     Vem depois de um elemento .post-blog, então é selecionado!
</div>
<div class="post-blog">
     Tbm vem depois de um elemento .post-blog, então é selecionado!
</div>

Pegou a ideia?

Grande abraço e bons estudos!