Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

gRoOvE

Sobrescrever propriedade .class

Recommended Posts

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
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%">

 

Seleção_016.png

 

Ocorre um problema com precedência de seletores ai, mas não sei resolver.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
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%">

 

Seleção_016.png

 

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
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%">

 

Seleção_016.png

 

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

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
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?

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.