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

Duvida Seletores

Boa tarde!

No exercício da aula 07, sobre seletores, fiz o meu com .post.blog~article, diferente da solução dada (abaixo) e funcionou como o desejado... há algum problema futuro quanto a esta implementação?

.post-blog + .post-blog {
    /* trocamos padding-bottom e margin-bottom por
        padding-top e margin-top */
    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;
    /* trocamos "bottom center" por "top center" */
    background-position: top center;
}

Obrigada!!!

2 respostas
solução!

Boa tarde, Simone! Tudo bem? =)

Me parece que você já entendeu como funcionam os seletores, pois está fazendo alguns testes e isso é bem bacana! Mas só para garantir...

elemento ~ elemento2 { ... }
elemento + elemento2 { ... }

Ambos os códigos acima são seletores de irmãos (siblings), mas qual a diferença entre eles?

O primeiro, com ~, irá procurar todos os elemento2 precedidos por elemento. Já o segundo, +, procura por "irmãos adjacentes", ou seja, elemento2 que sejam imediatamente precedidos de elemento. A diferença é sutil, mas pode ter grande impacto em seu CSS.

Além disso, você alterou de .post-blog para article, diminuindo um pouco a especificidade... Se houver algum article sem a classe post-blog, ele também estará selecionado...

No nosso caso, não me recordo se teremos algo assim, então acredito que não haverá impactos futuros. =)

Espero ter ajudado! Qualquer dúvida, não deixe de postar aqui...

Abraço e bons estudos,

Fábio

Muito obrigada! Muito esclarecedor