Change style of repeated classes differently with CSS

Question

I have a "test" class with a stylization and soon after I have another "test" class. What I’d like to know is how to change the style of the other class differently from the first. What limits me to doing this is that I can’t change or add classes, I can only use it the way it is. The only thing that is different is that the two classes are inside different containers, would have some way to apply another style in the second example, having as reference class "tal2"?

<div class="tal">
    <div class="teste"></div>
</div>

<div class="tal2">
    <div class="teste"></div>
</div>

Answer 1

Just use a different selector pointing to the class .teste within the class .tal2:

.teste{
   color: red;
}

.tal2 .teste{
   color: blue;
}

<div class="tal">
    <div class="teste">texto vermelho</div>
</div>

<div class="tal2">
    <div class="teste">texto azul</div>
</div>

The selector .tal2 .teste will change all classes .teste inside .tal2. You can even use variations. For example, to change only direct children of .tal2 who own the class .teste, use the symbol > between classes:

.teste{
   color: red;
}

.tal2 > .teste{
   color: blue;
}

<div class="tal">
    <div class="teste">texto vermelho</div>
</div>

<div class="tal2">
    <div class="teste">texto azul</div> <!-- filho direto -->
    <div>
       <div class="teste">texto vermelho</div> <!-- não é filho direto -->
    </div>
</div>