Cálculo de Especificidade: Estilo Inline, ID, Classe e Elemento
Calcule pontuações de especificidade e preveja qual regra vencerá qualquer conflito de estilos.
Cálculo de Especificidade: Estilo Inline, ID, Classe e Elemento é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
O que é especificidade
A especificidade determina qual regra CSS vence quando várias regras têm como alvo o mesmo elemento e a mesma propriedade. Ela é calculada como uma pontuação de quatro partes: (A, B, C, D), em que A é a mais alta e D, a mais baixa.
Componentes da especificidade
As quatro colunas:
- A: Estilos embutidos (atributo style="") = 1,0,0,0
- B: Seletores de ID (#id) = 0,1,0,0
- C: Seletores de classe (.class), seletores de atributo e pseudoclasses = 0,0,1,0
- D: Seletores de tipo (elemento) e pseudo-elementos = 0,0,0,1
Exemplos de especificidade
Calculando a especificidade:
<p>Plain paragraph — matches <code>p</code></p>
<p class="card">Card paragraph — matches <code>.card</code></p>
<div id="header">
Header block — matches <code>#header</code>
<span class="logo">Logo — matches <code>#header .logo</code></span>
</div>
<p class="intro">Intro paragraph — matches <code>p.intro</code></p>
<nav class="nav">
<a href="#" class="nav-link active">Active link — matches <code>.nav .nav-link.active</code></a>
</nav>O seletor universal não tem especificidade
O seletor universal *, os combinadores (+, >, ~, espaço) e a pseudoclasse :where() contribuem com zero (0,0,0,0) para a especificidade.
Os estilos embutidos vencem
Os estilos embutidos (atributo style="") têm a maior especificidade (1,0,0,0). Somente !important pode substituí-los a partir de uma regra da folha de estilos.
Comparando pontuações de especificidade
Compare da esquerda para a direita. A primeira coluna em que as pontuações diferem determina o vencedor. (0,1,0,0) vence (0,0,99,99) porque a coluna de ID vence imediatamente.
Especificidade de :is(), :not() e :has()
:is(), :not() e :has() assumem a especificidade de seu argumento mais específico:
<div id="header">:is(#header, .nav) match via ID</div>
<nav class="nav">:is(#header, .nav) match via class</nav>
<button class="active">Active button (excluded from :not(.active))</button>
<button>Plain button (matches :not(.active))</button>
<p class="p">:where(.p) paragraph</p>Especificidade de nth-child
:nth-child(), :first-child, :hover e outras pseudoclasses adicionam (0,0,1,0) — especificidade no nível de classe.
Especificidade de pseudo-elementos
::before, ::after, ::first-line etc. adicionam (0,0,0,1) — especificidade no nível de elemento. Eles ficam na coluna D.
Especificidade não é herança
A especificidade é calculada por propriedade e por elemento. Uma regra com maior especificidade vence para uma determinada propriedade, mas valores herdados de um elemento pai com alta especificidade não vencem regras diretas mais específicas aplicadas ao elemento filho.
Ferramentas de cálculo de especificidade
Use ferramentas online como specificity.keegan.st ou o DevTools do navegador para verificar a especificidade. No DevTools, estilos riscados no painel de estilos indicam que uma regra mais específica venceu.
Verificação rápida
Qual seletor tem maior especificidade: #sidebar .link ou .nav .nav-item .nav-link.active?
Recapitulação
As pontuações de especificidade são (A, B, C, D): estilos embutidos, IDs, classes/atributos/pseudoclasses, elementos/pseudo-elementos. Compare da esquerda para a direita: a primeira coluna diferente vence. :where() sempre contribui com zero. Um ID vence qualquer quantidade de seletores de classe. Use o painel de estilos do DevTools para ver quais regras vencem e por quê.
Perguntas Frequentes
A aula “Cálculo de Especificidade: Estilo Inline, ID, Classe e Elemento” é grátis?
Sim — o texto completo de “Cálculo de Especificidade: Estilo Inline, ID, Classe e Elemento” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Cálculo de Especificidade: Estilo Inline, ID, Classe e Elemento”?
Calcule pontuações de especificidade e preveja qual regra vencerá qualquer conflito de estilos. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Cálculo de Especificidade: Estilo Inline, ID, Classe e Elemento”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Cálculo de Especificidade: Estilo Inline, ID, Classe e Elemento
- A Cascata: Origem e Ordem
- !important: Quando Usar e Por Que Evitar
- Herança e a Propriedade all