Sobrescrever propriedade .class

[gRoOvE 0]

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.

[Public2004 79]

<td class=verde>content</td>

td.verde {color: green;}

[gRoOvE 0]

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.

[Public2004 79]

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>

 

[gRoOvE 0]

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? haha

[Public2004 79]

Nã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.

 

[Denis.Santos 7]

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.

[Omar~ 87]

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 HTML

 

 

 

[Maujor 144]

A 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

[gRoOvE 0]

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;
}

 

[Maujor 144]

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?

[gRoOvE 0]

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.