How to make an element *Child* unique (Where the child of the child has the same class)

Question

How to make an element unique Son (Where the son’s son has the same class)?

Someone can bring a preferred CSS solution?

Example below:

<main id="conteudo"> <!-- Pai -->
  <section class="vitrine"> <!-- Filho -->
      <div class="vitrine centraliza-vitrine"> <!-- Filho do filho -->
      </div>
   </section>
</main>

Answer 1

Cara has as yes, the problem is that some classes are inherited by default, such as text type properties color and font-family.

You’ll need to use the dial :not(), to prevent the element with the classes .vitrine and .centraliza-vitrine at the same time don’t receive the styles. But you won’t be able to block the inherited text styles.

With the rule .vitrine:not(.centraliza-vitrine) { }

WITHOUT the rule .vitrine:not(.centraliza-vitrine) { }

Code of the image above

#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>

---

TIP

You can try to "remain" the styles of the child element of the child, for example by placing a all:initial in it, however it will stick with the styles "zeroed".

#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>