CSS HTML

Aprenda o que é especifidade no CSS

23 de dezembro de 2019

Aprenda o que é especifidade no CSS

Aprenda nesse artigo o que é especifidade no CSS, com exemplos e utilizações do dia a dia para melhorar os seus projetos web!

o que é especifidade capa

Um assunto muito presente no dia a dia de quem mexe com CSS, mas quase não percebemos ou damos importância a este termo

Você já pode ter lido ou ouvido por outro nome, CSS Specifity, esta técnica é a forma de aplicarmos CSS a elementos por meio de regras mais específicas

Assim conseguimos sobrepor estilos que foram herdados de outros elementos, sem fazer grandes alterações no projeto, somente com regras um pouco mais direcionadas

O que acontece é que cada tipo de seletor tem um peso diferente e até unir/concatenar seletores gera um peso diferente, por isso é interessante entender bem este conceito

Como o peso de especifidade funciona e é calculado

Há dois pontos: o peso do seletor e a concatenação de seletores

Veja a ordem de especifidade dos seletores (ordem crescente):

  • Seletores universais ( p, div, span );
  • Tipo de seletores;
  • Classes ( .alguma-classe );
  • Atributo (type=’button’);
  • Pseudo-classes ( p:hover );
  • IDs ( #algum_id );
  • Inline ( <p style=”color:back;”>Exemplo</p> );

Quando o mesmo ‘peso’ de seletores é atribuído a regra, a última regra é a que vale

Por exemplo:

div p {
 color: red;
}

html p {
 color: purple;
}

O seletor que começa com html vence a especificação

Pois concatenamos dois seletores universais nas duas regras, então manda a ordem em que eles foram posicionados no arquivo de CSS

Outro detalhe é que o !important, que deve ser evitado, sobrepõe qualquer CSS previamente determinado

Agora sobre a concatenação de seletores, basicamente usamos a ordem que vimos anteriormente, porém somando com as regras concatenadas

.alguma_classe p {
 color: red;
}

#algum_id p {
 color: green;
}

Neste caso, o p será da cor verde pois o id vence da classe na guerra das especifidades, entende? 😀

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Esse é basicamente o core da teoria, temos por um lado uma ordem de especifidade que é respeitada

Ou seja, seletores de elementos sempre vão perder para regras de seletores com ids

E com certeza você já deve ter observado uma regra riscada no inspecionar elemento do navegador (Ctrl + Shift + i) no Chrome

especifidade na pratica chrome

As regras de padding-bottom e border-bottom, neste exemplo, foram ignoradas pois há outros seletores mais específicos que este colocando um estilo neste elemento

Então sempre que aparecer uma propriedade riscada, é por que em algum outro lugar do código no CSS uma regra mais específica foi criada ( ou feita inline, é claro )

Conclusão

Neste artigo vimos o que é especifidade no CSS por meio de exemplos de regras e de quais seletores são mais especificos

Além disso é muito importante observar a questão da concatenação de seletores, pois é a técnica mais utilizada no dia a dia

Dominando esta teoria da especifidade você nunca mais ficará em dúvida de como inserir CSS em qualquer elemento e vencer na especifidade

Além de não precisar alterar o HTML para fazer a inserção de CSS no seu projeto web

E por hoje é isso, até o próximo post!

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo 😀

 

 

0

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Deixe um comentário

avatar
  Subscribe  
Notify of