0

Tenho uma classe "teste" com uma estilização e logo em seguida tenho outra class "teste". O que eu gostaria de saber é como alterar o estilo da outra class de forma diferente da primeira. O que me limita a fazer isso é que não posso alterar e nem adicionar classes, só posso usar ela do jeito que está. A unica coisa que tem diferente é que as duas classes estão dentro de containers diferentes, teria alguma forma de aplicar outro estilo no segundo exemplo, tendo como referência a class "tal2"?

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

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

1 Resposta 1

5

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

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 .