Solucionado
Bom dia! Eu utilizei o seletor ~ ao invés de +, pois o professor disse que ~ significa "Irmão após irmão" e funcionou perfeitamente, qual o motivo dele ter empregado + e não ~ ?
.post ~ .post{
padding-top: 1em;
margin-top: 1rem;
background-size: 100% .1em;
background-position: top;
background-repeat: no-repeat;
background-image: linear-gradient(to left,transparent, #71767b, transparent);
}
Fala João! Tudo bom?
Existem uma diferença entre esses dois seletores, vou explicar aqui embaixo!
Quando utilizamos o +, estamos selecionando o elemento imediatamente após, veja o exemplo abaixo:
E + F{
}Nesse seletor, selecionamos todas os elementos F imediatamente precedidos de E, ou seja eles, além de serem irmãos, precisam ser irmãos adjacentes!
Dai vem o nome, seletor de irmão adjacente!
No outro caso, quando fazemos:
E ~ F{
}Selecionamos todos os F que sejam irmãos de E, ou seja, se estiverem no mesmo "nível" serão selecionados (lembre-se que nosso código é lido seguindo o padrão ocidental, então os elementos F selecionados serão os que vierem depois de E)
Esse seletor, chamamos de seletor de irmão ou irmão geral!
Abaixo deixo um exemplinho para que fique um pouco mais claro
HTML
<p> primeiro p </p>
<h1>titulo</h1>
<p>segundo p</p>
<p>terceiro p</p>CSS
/* TODOS OS P ABAIXO DO H1 SERÃO VERMELHOS! */
h1 ~ p {
color: red;
}
/* APENAS O P COM O CONTEÚDO "segundo p" SERÁ PINTADO */
h1 + p {
color: red;
}
Espero que tenha entendido melhor João! Qualquer dúvida só falar!
Abraços e bons estudos!!
Perfeito, além do que já foi dito João, no caso do exercício, temos o mesmo resultado que desejamos utilizando qualquer um dos seletores, pois se utilizarmos o seletor:
.post-blog ~ .post-blog {Como os post-blog são classes de mesmo nível teremos todos os posts menos o primeiro.
E com
.post-blog + .post-blog {No primeiro caso teremos o segundo post e no segundo caso teremos o terceiro post, pois o post anterior servirá de parâmetro para o posterior, e como a borda agora é superior e não inferior não teremos borda no final e sim entre os posts.
Espero ter ajudado e bons estudos.