13

Minhas folhas de estilo declaram formatação para uma classe mais ou menos assim:

.foo div label {
    width: 100px !important;
}

Isso vem de um plugin. Eu não gostaria de mudar as folhas de estilo do plugin, mas sim adicionar minhas próprias folhas para sobrescrever os formatos.

Ocorre que em determinado caso, eu desejo ter labels com comprimentos maiores. Tentei algo do tipo:

.bar label {
    width: 150px !important;
}

Achei que isso seria mais específico e por isso seria a formatação que valeria no final. Eu estava enganado. Se eu sobrescrever com o seletor inteiro, irá alterar casos que eu gostaria de deixar intactos. Mas minha própria declaração não irá sobrescrever o CSS do caso específico.

Existe alguma forma de declarar uma formatação como mais importante do que importante? Algo do tipo:

.bar label {
    width: 150px !important !urgent !emergency !runToTheHills;
}
5
  • A denotação !important tem precedência, mas experimenta aplicar a mesma no mesmo exato caminho: .foo div label {width:150px !important;} para garantir uma subscrição da primeira definição.
    – Zuul
    Commented 8/10/2014 às 19:22
  • @Zuul eu desejo alterar apenas um subconjunto das minhas labels geradas pelo plugin. Se eu sobrescrever o seletor todo, vou alterar todas as labels, não apenas um subconjunto. Commented 8/10/2014 às 19:24
  • 2
    E tipo: .foo div label.sub-conjunto {width:150px !important;}? A questão é que para garantires a subscrição, tens que ter uma correspondência com a declaração inicial. Da forma que tens na pergunta não existe essa correspondência pois o plugin tem um caminho mais específico que o teu.
    – Zuul
    Commented 8/10/2014 às 19:27
  • @Zuul valeu :D dar uma classe às labels resolveu o problema! Esse foi o comentário mais iluminador que eu vi nos últimos dias :D Commented 8/10/2014 às 19:31
  • A ideia do @zuul é ideal e ele devia colocar uma resposta com isso :) Mas em casos em que isso não dê, só mesmo no HTML, inline como eu referí aqui: pt.stackoverflow.com/questions/25311/…
    – Sergio
    Commented 8/10/2014 às 19:35

4 Respostas 4

10

A denotação !important tem precedência quando os estilos são aplicados. Contúdo, se garantires uma correspondência com a declaração inicial, ou seja, o mesmo caminho até ao elemento que recebe o estilo, podes assim aplicar um estilo extra fazendo uso de uma classe de CSS e consegues subscrever a primeira instrução importante pela segunda:

O plugin usa:

.foo div label {
    width: 100px !important;
}

Deverás usar o mesmo e aplicar um estilo extra, por exemplo fazendo uso de uma classe de CSS:

.foo div label.sub-conjunto {
    width: 150px !important;
}

Desta forma, como estás a aplicar um estilo no mesmo "caminho" do estilo aplicado pelo plugin, o fato de teres a classe de CSS vai criar a subscrição que pretendes e a largura será de 150px ao invés de 100px para o elementos label com .sub-conjunto.


A saber: Sobre este assunto, existe uma resposta do @Sergio que aprofunda o funcionamento hierárquico do CSS.

5

A declaração importante serve para determinar que uma certa propriedade tem prioridade independente da ordem em que elas aparecem na folha de estilo, sendo assim, na situação acima, onde duas declarações conflitam, ainda que a primeira ocorra antes da segunda, a primeira tem preferência.

No exemplo abaixo o segundo seletor é mais específico e declarado depois, mas a primeira regra será aplicada devido a declaração !important.

p {margin-left: 5px !important}
#id p {margin-left: 10px}

Quando dois seletores tem a declaração importante e conflitam entre si, o seletor que aconteceu por último terá prioridade, sendo assim é necessário que você insira sua folha de estilos depois da folha de estilos do plugin.

p {margin-left: 5px !important}
#id p {margin-left: 10px !important}

Ainda, quando duas ou mais declarações se aplicam ao mesmo elemento e setam a mesma propriedade, aquela com maior especificidade será aplicada (se tem a mesma especificidade, a que acontece depois será aplicada). Dessa forma o ideal no seu caso é adicionar no seu label uma classe, de forma que o seguinte seja possível:

.suaclasse {
    some: value !important
}

Dessa forma os elementos desejados podem ser acessados com maior especificidade.

0
4

Cara, tente aumentar a especifidade da sua declaração, neste exemplo eu vou colocar body, mas pode ser um elemento antes como div, .class ou #id.

Css do Plugin:

.foo div label {
     width: 150px !important;
}

Seu Css:

body .foo div label {
    width: 100px !important;
}
4

CSS - Cascading Style Sheets

O CSS é renderizado por hierarquia, ou seja, os últimos sobreporão os anteriores, ou seja no exemplo:

p {color:red;}
p {color:blue;}
<p class="cor">Texto azul</p>

A cor renderizada será a blue, porém o tipo do seletor também é levado em conta, como:

p.cor {color:red;}
.cor  {color:blue;}
<p class="cor">Texto vermelho</p>

Mesmo que o último seletor esteja definido com a cor azul, ainda assim o texto estará em vermelho, pois o anterior é mais específico. Mas no caso do !important:

.cor  {color:blue !important;}
p.cor {color:red;}
<p class="cor">Texto azul</p>

Mesmo que o seletor seja mais específico, será renderizado a regra definida como !important, porém:

p.cor {color:red !important;}
.cor  {color:blue !important;}
<p class="cor" id="texto">Texto vermelho</p>

Se ambas as regras estiverem definidas como !important, será renderizado a regra com o seletor mais específico.

Exemplo

p { color:blue;}
.importante{color:red;}
span.importante{color:gray;}
#importante{color:green;}
<p>Normal</p>
<p class="importante">Importante</p>
<span class="importante">Span Importante</span>
<p class="importante" id="importante">
    Especificamente Importante
</p>
<p class="importante" id="importante" style="color:#35C !important;">Importantissimo</p>

Então se você quer sobrepor a regra:

.bar label {
    width: 100px !important;
}

Use:

<tag>.bar label {
    width: 150px !important;
}

No caso a <tag> do exemplo é a tag que contém a classe .bar. Ou seja, se for uma diventão fica div.bar label {...}.

Ps.: É sempre bom ter o seu CSS bem estruturado, assim será raras as situações onde será necessário o uso do atributo !important.

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 .