1

Como tornar único um elemento Filho (Onde o filho do filho tem a mesma class)?

Alguém pode trazer uma solução de preferencia em CSS?

Exemplo abaixo:

<main id="conteudo"> <!-- Pai -->
  <section class="vitrine"> <!-- Filho -->
      <div class="vitrine centraliza-vitrine"> <!-- Filho do filho -->
      </div>
   </section>
</main>
3
  • obs: não é possivel adicionar, alterar ou remover nenhuma class de lá, quero somente capturar o filho, sem mudar as propriedades do filho do filho. Commented 8/03/2019 às 14:49
  • Vc quer dizer que por exemplo a classe .vitrine vai ter alguns estilos que vc não quer que seja aplicado tb ao filho?
    – hugocsl
    Commented 8/03/2019 às 14:50
  • exatamente!!!!! Commented 8/03/2019 às 14:54

1 Resposta 1

0

Cara tem omo sim, o problema é que algumas classes são herdadas por default, como por exemplo propriedades de texto tipo color e font-family.

Vc vai precisar usar o seletor :not(), para evitar que o elemento com as classes .vitrine e .centraliza-vitrine ao mesmo tempo não receba os estilos. Mas vc não vai conseguir bloquear os estilos de texto herdados.

Com a regra .vitrine:not(.centraliza-vitrine) { }
inserir a descrição da imagem aqui

SEM a regra .vitrine:not(.centraliza-vitrine) { }
inserir a descrição da imagem aqui

Código da imagem acima

#conteudo {
    color: green;
}

.vitrine:not(.centraliza-vitrine) {
    border: 1px solid #000;
    box-shadow: 0 0 10px green;
    margin-top: 20px;
    
/* estilos herdados */
    color: red;
    font-size: 20px;
    font-family: sans-serif;    
}
<main id="conteudo"> <!-- Pai -->
    <section class="vitrine"> <!-- Filho -->
        Filho
        <div class="vitrine centraliza-vitrine"> <!-- Filho do filho -->
            Filho do filho 
        </div>
    </section>
    <section class="vitrine"> <!-- Filho -->
        Filho
        <div class="vitrine centraliza-vitrine"> <!-- Filho do filho -->
            Filho do filho 
        </div>
    </section>
</main>


DICA

Vc pode tentar "restar" os estilos do elemento filho do filho, por exemplo colocando um all:initial nele, porém ele vai ficar com os estilos "zerado".

#conteudo {
    color: green;
}

.vitrine:not(.centraliza-vitrine) {
    border: 1px solid #000;
    box-shadow: 0 0 10px green;

/* não vai herdar esses estilosestilos herdados */
    color: red;
    font-size: 20px;
    font-family: sans-serif;
    margin-top: 20px;
}
/* estilos iniciais padrão do elemento */
.vitrine.centraliza-vitrine {
    all:initial;
} 
<main id="conteudo"> <!-- Pai -->
    <section class="vitrine"> <!-- Filho -->
        Filho
        <div class="vitrine centraliza-vitrine"> <!-- Filho do filho -->
            Filho do filho 
        </div>
    </section>
    <section class="vitrine"> <!-- Filho -->
        Filho
        <div class="vitrine centraliza-vitrine"> <!-- Filho do filho -->
            Filho do filho 
        </div>
    </section>
</main>

2
  • 1
    Hugo, MUITO OBRIGADO!!! a propriedade ".vitrine:not(.centraliza-vitrine)" funcionou perfeitamente, era isso mesmo, sabia que a propriedade :not existia mas não sabia pra que servia, agora sei ahahahah vlw mesmo! Commented 8/03/2019 às 15:40
  • @LucasPereira legal que ajudou ai! Se vc acredita que o problema foi resolvido e a resposta te ajudou, considere marca-la como Aceita, nesse ícone ✔ abaixo das setinhas no lado esquerdo da resposta :) Assim o site não fica com perguntas abertas pendentes sem resposta aceita. Vc pode remover a aceitação, ou mudar para outra resposta caso apareça alguma que te atende melhor. Abs
    – hugocsl
    Commented 8/03/2019 às 15:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .