Pular para conteúdo 
Зеленый кофе

O autor

Carlos Eduardo de Souza, Front-End Developer & Interface Designer na Coopers Digital Production, dedica seu tempo para o desenvolvimento de uma Web mais acessível. Possui certificado W3C em Mobile (sites e web apps) e HTML5.

Portfolio e blog sobre Web Standards – project.47, de Carlos Eduardo de Souza

Blog

Topo 24/08/06

Aprendendo a especificidade do CSS

Quem já não enfrentou problemas com a especificidade do CSS? Reformulando melhor a pergunta, se vocę já fez um menu que possui efeitos em seus link que acabam “passando” para o resto dos links do site, já passou por este problema. Pelo menos para mim este é um dos mais comuns que enfrento.

Este artigo tem como propósito ajuda-lo na resolução de tais problemas, fugindo de artifícios como !important que pode acabar lhe atrapalhando mais do que ajudando.

Primeiramente, temos tręs tipos de seletores (falarei mais destes outros termos em outro artigo) e a sua importância aumenta a cada nível que passa:

  1. Seletor de elemento e pseudo-elementos. Ex: a { declaração }
  2. Seletor de classe (e seletores de atributos). Ex: .menulink { declaração }
  3. Seletor de id. Ex: #menulink { declaração }

Desta forma, um seletor de id sobrepőe as declaraçőes do seletor de classe que, por sua vez, sobrepőe as declaraçőes do seletor de elemento.

Continuando com o exemplo dos itens menu, se vocę utilizar apenas o link sem classe alguma e usar um seletor de elemento, apenas, todos os links do site utilizarão tal regra. Porém, se vocę quiser que somente os links do menu tenham tal declaração, só precisamos que seja mais específico, ou seja, se o link estiver dentro de uma div com id “menu”, então, só devemos escrever a regra completa em seu CSS:

div#menu a { declaração }

Assim, somente os links dentro da div com id “menu” terão tais declaraçőes.

Sabendo da especificidade do CSS podemos evitar muitos problemas que poderão acontecer durante o desenvolvimento de qualquer site. Por isso, não custa nada frizarmos estes itens.

Assuntos: CSS
Trackback Feed deste artigo

7 comentários para "Aprendendo a especificidade do CSS"

  1. Jader Rubini | 24/08/06 - 10:38 am

    Muito bom. Eu, particularmente, nunca tive problemas com isso não (acredite se quiser! :P), pois sempre fiz o uso de seletores bem especificados e, por isso, nunca tive que usar o !important. Aliás, acho que nem sei usá-lo corretamente :) (que vergonha).

    Vou aproveitar o gancho aqui e preparar um artigo sobre a sintaxe CSS. Tem cada coisa que a gente lę de pessoas “ensinando” CSS por aí que chega a dar dó. Coisas do tipo:

    “Use a tag CSS p, seguida do atributo line-height, pra definir um espaçamento entre as linhas dos parágrafos.”

    Topo
  2. Carlos Eduardo de Souza | 24/08/06 - 12:21 pm

    Outro bom exemplo (e melhor até do que utilizei no texto) é no caso de se fazer um menu com listas, o que na realidade é o certo.

    Então, para escrever a regra no CSS é melhor ainda:

    ul#menu li a { declaração }

    Aí fica tranqüilo :)

    Topo
  3. Thalis Valle | 24/08/06 - 12:26 pm

    Neste caso, pode-se ausentar a especidicação do seletor.

    Ex: #div li a {}

    Topo
  4. Eugenio Grigolon | 24/08/06 - 12:41 pm

    Ótimo post Carlos. Tive a experięncia de ensinar CSS a uma pessoa que sabia pouco sobre HTML e semântica. Até aí tudo bem, mas foi muito difícil para ela entender como funciona CSS. Nós que já usamos a muito tempo, enfrentamos um ou outro problema, mas pra quem nunca viu essa parte, não sabe o significado. E outra, ela apenas leu um artigo e pensou que CSS era a coisa mais fácil, e que logo seria um ótimo programador de CSS. Coisas assim me deixam triste, pois vocę sabe que a pessoa não tem a mínima noção de como funciona CSS, só sabe a estrutura.

    A respeito do seu post, aprendi pelo no CSS mesmo, estilo em cascata, ou seja, estilos em blocos. Sempre, em todos os CSS que desenvolvo, sigo a hierarquia. Se no meu XHTML possui um DIV “pai” chamado main, seguido de um DIV “filho” chamado top, e detro desse um “subfilho” chamado menu, todas as minhas declaraçőes será #main #top #menu a { } por exemplo. Isso acho que deve ter uma atenção maior, pois é isso o que significa CSS.

    Topo
  5. Carlos Eduardo de Souza | 24/08/06 - 12:58 pm

    O legal é isso, manter uma organização que vocę entenda, a fim de facilitar ao máximo a atualização do site.

    Respondendo ao Thalis, não precisaria do elemento mesmo, só necessitando da ID, como vocę mesmo já fez :)

    Topo
  6. Pedro Rogério | 11/09/06 - 11:04 pm

    Muita boa a explicação. Abraços!!!

    Topo
  7. » Dicas para melhorar seu CSS: Parte 2 project.47 - Portfolio e blog sobre Web Standards » Arquivo do Blog | 3/04/07 - 11:17 am

    […] o caso da especificidade de forma mais específica neste artigo, vale a pena […]

    Topo
Comente este artigo
  1. (obrigatório)
  2. (obrigatório)

Links Randômicos
Meta
Apoio
Créditos
Creative Commons