Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Declaração CSS com !important

Publicado em: 2006-08-18 — 121.493 visualizacoes

Uma das diretrizes das CSS que decide qual a regra de estilo que deve ser aplicada em caso de conflito entre duas ou mais regras chama-se “efeito cascata”.
Se você, ao escrever sua folha de estilo declarar na segunda linha do arquivo uma regra assim:

Linha 2 – p {font-size:14px;}

a seguir continuar escrevendo outras regras e lá embaixo na trigésima linha escrever:

Linha 30 – p {font-size:12px;}

cria um conflito entre duas regras para o tamanho da fonte nos parágrafos.
Aí eu pergunto:
Qual será o tamanho da fonte nos parágrafos do documento?
Resposta: 12px. Por que?

Porque uma (existem várias) das diretrizes do efeito cascata estabelece que a regra de estilo escrita depois (ou posteriormente) no fluxo da folha de estilos, prevalece sobre aquelas escritas anteriormente. É isto o que acontece no exemplo acima, a regra escrita na trigésima linha prevalece sobre a anterior, escrita na segunda linha. Quer saber mais sobre efeito cascata? Leia: O efeito cascata e saiba também o que é especificidade para o efeito cascata

Toda esta introdução e exemplificação mostrada acima para dizer que uma declaração CSS com !important assume a prioridade mais alta na ordem da cascata e só perde para outra declaração com !important mais específica.

Suponha que no exemplo anterior tenha sido alterada a regra escrita na linha 2 conforme mostrado a seguir:

Linha 2 – p {font-size:14px !important;}


Linha 30 – p {font-size:12px;}

Agora o tamanho da fonte nos parágrafos será 14px, pois a declaração que contém !important assume a prioridade, ‘quebrando’ o efeito cascata.
Notar que !important deve ser escrito logo após o valor da propriedade na declaração CSS (propriedade: valor), com ou sem espaço, (aconselho a deixar um espaço para maior legibilidade) e antes do ponto e vígula que termina a declaração.

Atenção: Ressalto que !important só perde para outra !important mais específica.
Assim, uma regra de estilo contida em uma folha de estilos externa e cuja declaração seja com !important, prevalece inclusive sobre um estilo inline (aquele declarado dentro da tag HTML com o atributo style)

Agora vem a pergunta natural: Mas afinal para que serve !important.? Basta eu escrever minhas regras de estilo de acordo com o efeito cascata e estarei tranqüilo.
Você cedo ou tarde, à medida que se aprofundar em projetos CSS vai descobrir por si só ‘para que serve’, contudo desde já adianto duas situações típicas:
É empregado por questões de acessibilidade, por usuários que escrevem folhas de estilos para navegar de acordo com suas necessidades especiais.
É empregado em folhas de estilo para mídias alternativas com a finalidade de sobrescrever regras de estilo de grande especificidade contidas em folhas de estilos gerais.

Eu costumo usar para “debugar” folhas de estilo muito longas quando ao criar uma regra CSS simples ela não funciona. Acresento !important, se funcionar é um indício que existe uma regra de maior especificidade do que a que eu acabo de escrever.

Agora é com você. Faça algumas experiências e comprove na prática como funciona uma declaração de estilo com !important.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

Esta matéria foi publicada em: 2006-08-18 (sexta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/08/18/declaracao-com-important/trackback no seu site.

28 comentários na matéria: “Declaração CSS com !important”

  1. Odilon DuarteNo Gravatar disse:

    Romario sena eu gostaria de saber se possível sobre html 5 tratamento css e como aplicar banco dados na linguagens em que se atuais de hoje são exemplos de eficiência alguns blog linguagens ex.wordpres fontes exemplo sobre o que pode fazer em navegadores 1que não são atualizados https://sonhosdeumprofessordeeducacaofisica.wordpress.com/tag/e-e-sinha-andrade/

  2. Romário SenaNo Gravatar disse:

    Parabéns!!! Bem explicado! 😉

  3. Pedro LucasNo Gravatar disse:

    Essa explicação foi extremamente eficiente e objetiva…
    Obrigado!!!

  4. GuilhermeNo Gravatar disse:

    Ótima esplicação.
    Uma das alternativas pra colocar banners jQuery na pagina, e arrumar a bagunça que ele faz

  5. Customização Página - Login Admin WHMCS - WHMCS.Blog.Br - WHMCS disse:

    […] as personalizações de cores, fundo de uma forma mais prática ( não esqueça de utilizar a declaração important para que as alterações sejam válidas […]

  6. FernandoNo Gravatar disse:

    Mew, eu agora no inicio de 2013, vendo comentários de 2006. Que loucura. hehehe.

    Ótimo post, claro, inciso e objetivo.

    Parabéns!!

    😉

  7. CarlosCXNo Gravatar disse:

    Muito bom Maujor.

    abraços!

  8. LucasNo Gravatar disse:

    ótimo, acabei de descobrir na p´ratica e vim pesquisar sobre pra que servia exatamente, muito bom! e muito {!important;} essa peculiaridade da regra! 😀

  9. Urbano da SilvaNo Gravatar disse:

    Muito bom!!

    Me ajudou bastante

  10. WebisaacNo Gravatar disse:

    Uso para especificar regras das quais quero que sejam renderizadas primeiro pelo navegador. Geralmente uso quando quero que a borda ou cor de fundo de um box apareça primeiro durante o carregamento do site.

  11. MarceloNo Gravatar disse:

    Ta aih o mestre do CSS. vlw pela dica maujor

  12. Clã Celestial BlogNo Gravatar disse:

    Salvaste a minha vida, não conseguia fazer uma alteração de jeito nenhum e isso me ajudou mt.

  13. DodileiNo Gravatar disse:

    Gostei muito do tutorial, me ajudou numa dúvida que eu tinha, o que mais gostei foi da forma de ensino e apresentação.

    Continue assim! todos vão ganhar, conhecimento compartilhado!

  14. biancaNo Gravatar disse:

    otimo artigo! obrigada pela dica! 😉

  15. Leandro AlmeidaNo Gravatar disse:

    é possivel sobreescrever uma regra de estilo inline por uma regra vinda de uma folha externa utlizando !important ??

  16. rmaiaNo Gravatar disse:

    Como sempre uma solução para minhas dúvidas. Valeu mestre. 🙂

  17. Luã StradlinNo Gravatar disse:

    O blog tá fodástico!

  18. CarlosNo Gravatar disse:

    muito bom

  19. Min-height, hack rápido e fácil « W3Standards - Normas para World Wide Web disse:

    […] Bem não vou entrar em detalhes sobre esta declaração para que o post não fique muito extenso e também há bastante conteúdo sobre o assunto, talvez no próximo post comento um pouco sobre isto. Mas vou deixar o link do blog do maujor pra quem quiser entender melhor esta declaração. […]

  20. Farley Rangel » !important disse:

    […] origem: http://www.maujor.com/blog/2006/08/18/declaracao-com-important […]

  21. Lucas AlvesNo Gravatar disse:

    Muito bom artigo maujor!

  22. JoaresNo Gravatar disse:

    Valeu Maujor… já tinha te mandado um e-mail pedido esse esclarecimento… valeu mesmo!

  23. MárcioNo Gravatar disse:

    Usar !important como hack para o IE não é uma escolha usual!
    Prefira:
    body>p
    ou
    * html p.

  24. Fernando PradoNo Gravatar disse:

    Eu uso como hack válido pois o I.E ignora as declarações com !important.

    Exemplo:
    p {
    font-size:14px !important; /* Firefox, Opera etc… */
    font-size:12px; /* I.E */
    }

  25. Pedro RogérioNo Gravatar disse:

    Muito bom o tuto!!! Abraços!!!

  26. Felipe RanieriNo Gravatar disse:

    Que legal, me perguntei sobre isso na terça quando ao pesquisar a solução para um problema encontrado por mim aqui, me vi de frente com um !important.
    E concordo com o Carlos, é sempre importante destacar a hierarquia existente nas folhas de estilos.

    Abraços!!

  27. Areta do BemNo Gravatar disse:

    Muito bom esse artigo!

    Ontem mesmo me defrontei com essa situação, coloquei um estilo para o menu, por exemplo, assim:

    #menu ul li a:hover {
    color: #fff;
    background: #003B6E;
    }

    aí depois fui colocar uma regra geral para os links:

    a {
    color: #666;
    }

    e todos os links do site obedeceram o seletor a !

    Não entendi o porque…

    Agora com o seu artigo, vou procurar ler mais sobre o assunto.

    Muito obrigada!
    É de grande valia seu empenho de instruir, ainda mais para nós iniciantes!

    Att,

    Areta do Bem

  28. Carlos EduardoNo Gravatar disse:

    Ótimo artigo!

    Saber como a “hierarquia” funciona no CSS é muito importante para evitar dores-de-cabeça posteriores.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo