0

Calculando a especificidade das regras CSS. especificidade e o efeito cascata.

#CSS
Clayton Campos
Clayton Campos

Introdução

Neste Tutorial será abordado a especificidade das regras CSS, que se for esquecida, desconhecida ou negligenciada, acaba por trazer sérias dores de cabeça quando se constata que "alguma coisa não está funcionando como era de se esperar".


O efeito cascata

O uso das folhas de estilo para controlar o "visual" de um documento HTML, não raro resulta em regras CSS distintas, aplicáveis a um mesmo elemento no documento. Ou seja, fica estabelecido um conflito entre regras. Qual delas, regra, prevalece? Ah , isso você já sabe, entra aqui o conhecido "Efeito Cascata".


A especificidade

especificidade da regra CSS as vezes nos reserva "surpresas". Você deve conhecer como funciona a especificidade para evitar as surpresas.


Cálculos:

  1. Conte o número (quantidade) de atributos ID no seletor;
  2. Conte o número (quantidade) de atributos classe no seletor;
  3. Conte o número (quantidade) de tag's HTML no seletor;
  4. Escreva os números obtidos, da esquerda para a direita e na mesma ordem em que foram levantados (id,classe,tag).


O número assim obtido é a pontuação da especificidade da regra.


Exemplos:

1-) Para o seletor #conteudo p.nivelc temos um ID, uma classe e uma tag HTML.

2-) Para o seletor p span.nivelc temos zero ID, uma classe e duas tag's HTML.


Pontuação do primeiro seletor = 111

Pontuação do segundo seletor = 012


Se houver empate na pontuação vale o efeito cascata. Nesse caso a última regra declarada prevalece sobre a anteriormente declarada.


Exemplos de cálculo da pontuação


Pesquisando na internet achei essa tabela muito prática e esse artigo completo no blog do Majour.


Com essa tabela não tem erro e entendemos o grau de especificidade nos seletores do CSS


Artigo completo

https://www.maujor.com/tutorial/especificidade.php

0
13

Comentários (0)

Você é o único responsável por sua limitação, nunca pare de estudar !

Brasil