É só você usar um seletor diferente apontando para a class .teste
dentro da 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>
O seletor .tal2 .teste
irá alterar todas as class .teste
dentro de .tal2
. Você pode inclusive utilizar variações. Por exemplo, para alterar apenas filhos diretos de .tal2
que possuem a class .teste
, utilize o símbolo >
entre as 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>