Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia, preciso sobrescrever uma propriedade de classe em CSS mas não estou conseguindo.
Tenho o seguinte css:
.list_tabela td {
color:#000000;
}.verde td {
color: green;
}
Na tag table está assim: table class = "list_tabela", ou seja, para todos os td dessa table vai aplicar esta classe. Eu preciso que em um determinado td seja colocado a class .verde.
Tentei de toda forma com .class mas não consigo resolver, se colocar por id na td funciona, algo assim: td id="verde" e obviamente mudar no css pra id.>
33 minutos atrás, Public2004 disse:
<td class=verde>content</td>
td.verde {color: green;}
Foi isso que eu fiz, mas tem uma chamada da classe list_tabela td na tag <table> que buga a classe .verde, ela não consegue sobrescrever a propriedade da anterior.
<table id="list_tabela" cellspacing="0" width="100%">
Ocorre um problema com precedência de seletores ai, mas não sei resolver.A forma que sugeri está correta, provavelmente algum outro estilo sobrescrevendo isso...
Para testar, mude como abaixo e veja se aplica:
td.verde {color: green !important;}
<td class="verde">content</td>
>
2 minutos atrás, Public2004 disse:
A forma que sugeri está correta, provavelmente algum outro estilo sobrescrevendo isso...
Para testar, mude como abaixo e veja se aplica:
td.verde {color: green !important;}
<td class="verde">content</td>
Exatamente como mostrei no print tem outro estilo sobrescrevendo, mas não sei como resolver.
Com !important funcionou, mas é meio gambiarra isso não? hahaNão é gambiarra... foi justamente para tirar a dúvida sobre outro estilo sobrescrevendo... Você já deve saber que como o próprio nome diz, "css" são estilos em cascata, então o que você precisa fazer é procurar mais abaixo o outro estilo que esteja sobrescrevendo esse.
Att.
>
Em 24/11/2017 at 13:29, gRoOvE disse:
Foi isso que eu fiz, mas tem uma chamada da classe list_tabela td na tag <table> que buga a classe .verde, ela não consegue sobrescrever a propriedade da anterior.
<table id="list_tabela" cellspacing="0" width="100%">
Ocorre um problema com precedência de seletores ai, mas não sei resolver.
Nesse caso não funcionou pq você está mostrando uma herança maior na primeira declaração.
Você está dizendo que dentro da class list_tabela tem uma tag td.
Já na que você quer verde você diz apenas para tag td que tenha a class verde.
Tente fazer a class.list_tabela td.verde{}
Realmente o ideal é evitar o máximo possível o uso de !important, esse deve ser aplicado como último recurso.
>
Em 24/11/2017 at 13:29, gRoOvE disse:
Foi isso que eu fiz, mas tem uma chamada da classe list_tabela td na tag <table> que buga a classe .verde, ela não consegue sobrescrever a propriedade da anterior.
<table id="list_tabela" cellspacing="0" width="100%">
Ocorre um problema com precedência de seletores ai, mas não sei resolver.
Primeiro você não tem uma .list_tabela você tem uma #list_tabela
**<div class="minha_div"> Resultado: .minha_div**
**<div id="minha_div"> Resultado: #minha_div**
Assim como o uso de !important div id só deve ser usado como último recurso (De preferência não usar)
Aqui logicamente funcionou, veja o exemplo
Spoiler>
Citar
<style>
.list_tabela td { color: #000000 }
.list_tabela td.verde {color: green}
</style>
<table class="list_tabela">
<thead>
<tr>
<th>Título</th>
<th>Título</th>
</tr>
</thead>
<tbody>
<tr><td>Valor</td><td>Valor</td></tr>
<tr><td class="verde">Valor</td><td>Valor</td></tr>
<tr><td>Valor</td><td>Valor</td></tr>
</tbody>
</table>
Agora se o navegador não interpretar 2 coisas estão acontecendo.
1º As propriedades já escrita estão sendo re-escritas mais abaixo no CSS, é muito comum cometerem esse tipo de erro.
2º Você está usando div style direto na entrada HTMLA solução apontada por @Public2004 está correta.
O seletor apropriado é td.verde.
Ele indicou o uso de !important no seletor apenas para verificar a ESPECIFICIDADE do seletor.
Com !important funcionou, porque a especificidade do seletor foi a maior possível, indicando que
existe uma declaração CSS na folha de estilos mais específica que td.verde.
O que deve ser feito é aumentar a especificidade de td.verde.
Experimente tr td.verde (mais específica) se não funcionar experimente list_tabela td.verde
(com indicado por @Denis.Santos) e assim por diante.
@gRoOvE funcionou com ID porque é mais específico do que CLASS.
Leitura complementar: http://www.maujor.com/tutorial/especificidade.php
Amigos, obrigado pela ajuda consegui identificar o erro.
Como observado pelo @Omar~ / @Maujor minha <table> estava definido como ID e não CLASS, e como o ID se sobrepõe ao CLASS no CSS ele estava passando por cima da minha .verde no TD. Após corrigir este problema usando este código já funcionou, sem necessidade do !important.
td.verde {
color: green;
}>
1 hora atrás, gRoOvE disse:
...minha <table> estava definido como ID e não CLASS,...
Pelo que entendi você fez uma pergunta fornecendo informação errada (era ID e não CLASS como informou).
É isso mesmo?>
2 horas atrás, Maujor disse:
Pelo que entendi você fez uma pergunta fornecendo informação errada (era ID e não CLASS como informou).
É isso mesmo?
Isso, me equivoquei.