Skip to main content
adicionou 753 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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

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

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

Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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