{"id":300,"date":"2009-04-19T18:01:16","date_gmt":"2009-04-19T20:01:16","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=300"},"modified":"2009-04-19T18:06:26","modified_gmt":"2009-04-19T20:06:26","slug":"entendendo-a-especificidade-css","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/css\/entendendo-a-especificidade-css","title":{"rendered":"Entendendo a especificidade CSS"},"content":{"rendered":"

O CSS trabalha com tr\u00eas tipos de seletores. Cada um com sua import\u00e2ncia. Veja abaixo os seletores em ordem de import\u00e2ncia.<\/p>\n

    \n
  1. Seletores com id. Ex: #menu{declara\u00e7\u00e3o}<\/li>\n
  2. Seletores com class. Ex: .texto{declara\u00e7\u00e3o}<\/li>\n
  3. Seletores de elemento. Ex: p{declara\u00e7\u00e3o…}<\/li>\n<\/ol>\n


    \nA especificidade em CSS \u00e9 utilizada para determinar quais as regras tem preced\u00eancia, s\u00e3o mais espec\u00edficas, para estilizar um seletor.
    \nPor exemplo, se voc\u00ea tiver as seguintes marca\u00e7\u00e3o (X)HTML:<\/p>\n

    <div><p>Texto de exemplo<\/p><\/div><\/pre>\n
    E com a regra CSS a seguir:<\/p>\n
    p { color: red; } p { color: blue; } <\/pre>\n
    Qual a cor final do elemento?<\/strong>
    \nAcertou quem respondeu azul, isso  porque foi a \u00faltima regra a ser declarada.
    \nSe tiv\u00e9ssemos a regra:<\/strong><\/p>\n
    div p { color: red; } p { color: blue; } <\/pre>\n
    Qual seria a cor final do elemento?<\/strong>
    \nAcertou agora quem respondeu vermelho. Se perguntando o porqu\u00ea? Simples, pela especificidade do seletor div p<\/em> ser mais especifico que apenas o seletor  p<\/em>. Especificidade \u00e9 isso!
    \nAlgumas formas de calcular a especificidade de seletores s\u00e3o as seguintes:
    \nVoc\u00ea da a cada seletor id<\/em> (#) um valor de 100. Cada class<\/em> (.) voc\u00ea da um valor de 10, e por fim para cada seletor<\/em> HTML um valor 1. Depois apenas some os valores. O maior total \u00e9 a regra CSS mais especifica.
    \nVeja alguns exemplos:<\/p>\n