Especificidade CSS
Este curso explica como o CSS decide qual regra vence quando duas regras casam com o mesmo elemento e discordam sobre uma propriedade. A resolução segue uma ordem fixa: importância, depois especificidade, depois ordem do código. A especificidade é calculada em três colunas (IDs, classes e elementos), comparadas da esquerda para a direita. As aulas calculam seletores reais, mostram por que combinadores e o seletor universal não somam nada e tratam de estilos inline e !important. A última aula usa o painel Styles do DevTools para depurar conflitos e reúne hábitos que os evitam.
O que você vai aprender
- ✓A ordem que o CSS usa para resolver conflitos: importância, especificidade e ordem do código
- ✓Como escrever a especificidade como (IDs, classes, elementos) e comparar coluna por coluna
- ✓Por que combinadores e o seletor universal somam zero de especificidade
- ✓Quando a ordem do código decide e por que @media nunca muda a especificidade
- ✓Como estilos inline e !important superam regras normais, e por que evitá-los
- ✓Como depurar conflitos com o painel Styles do DevTools
A pergunta que todo curso até agora evitou
O curso anterior fez uma afirmação de passagem: uma regra de media query precisa vir depois da regra base que sobrescreve, porque as duas têm a mesma especificidade, e este curso explicaria. Aqui está a explicação. Ela responde a pergunta que todo curso de CSS até aqui contornou: quando duas regras…
Ler a aula completa grátis →Currículo
7 aulasA pergunta que todo curso até agora evitou
Mostra que a ordem do código só decide em empate de especificidade e apresenta a sequência: importância, especificidade, ordem.
O cálculo de especificidade: IDs, classes e elementos
Apresenta a especificidade como três colunas (IDs, classes e elementos), comparadas coluna por coluna e nunca somadas.
Calculando seletores reais, passo a passo
Calcula passo a passo a especificidade de cinco seletores reais, incluindo pseudo-classes e seletores de atributo.
Combinadores e o seletor universal não contam nada
Mostra que combinadores e o seletor universal somam zero, o que deixa um reset com * fácil de sobrescrever.
Ordem de origem como desempate
Explica que a ordem do código só decide num empate completo e por que @media nunca muda a especificidade.
!important e estilos inline: as saídas de emergência
Trata de estilos inline e !important, de como superam regras normais e de por que são último recurso.
Juntando tudo: depurando e prevenindo guerras de especificidade
Usa o painel Styles do DevTools para depurar conflitos e reúne hábitos que evitam guerras de especificidade.