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

Dúvida no Ex. 8 da Aula 7 - Seletores avançados do CSS

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 Linneu Borges Filho
| 53.5k xp | 17 posts
Estudante

Usando o exemplo dado em aula, não ocorre mudança nenhuma. Se eu coloco somente .texto no csss ele aplica, mas se eu usar .texto + .texto ele não faz nenhuma aplicação, tanto que no inspetor do Chrome consta que não tem nenhum comando no blog.css pra essa classe.

.texto + .texto {
  /* trocamos padding-bottom e margin-bottom por
     padding-top e margin-top */
  padding-top: 2em;
  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;
}
2 respostas
por Ramon Pacheco
| 487.6k xp | 249 posts
Moderador Web Developer Jr.

Olá Linneu,

nesse caso onde você declara .texto + .texto só vai funcionar se tiver essa classe .texto aplicada em outro elemento que esteja após a primeira aplicação da mesma classe.

solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Linneu, o seletor css + sempre vai pegar o primeiro irmão do elemento, nada como um exemplo para melhor entender:

// HTML
<div class="primeiro">
    <p>Texto</p>
</div>
<div class="segundo">
    <p>Texto</p>
</div>
<div class="primeiro">
    <p>Texto</p>
</div>

// CSS
div {
    height: 50px;
    width: 50px;
}
div.primeiro + div.primeiro {
    background: #000000;
    color: #FFFFFF;
}

Nesse exemplo nenhuma div vai obter o efeito do fundo preto e cor de texto branca, porque ? Porque não temos uma div com a classe "primeiro" logo após a primeira classe div, ou seja, temos uma "div.primeiro" e logo após ela temos "div.segundo", para que o código funcione temos que trocar a ordem do html para:

<div class="primeiro">
    <p>Texto</p>
</div>
<div class="primeiro">
    <p>Texto</p>
</div>
<div class="segundo">
    <p>Texto</p>
</div>

Nesse caso sim, agora temos uma "div.primeiro" e logo após ela "div.primeiro", então nosso código deve funcionar.

Veja aqui o exemplo e faça a modificação para testar:

https://jsfiddle.net/mahenrique94/ghwqome4/

Ficou claro sua dúvida ?