CSS é uma das ferramentas mais poderosas disponíveis para web designers. Com ele podemos alterar a interface de um site em poucos minutos sem alterar as tags da página. Mas apesar de cada um de nós perceber que é útil, os seletores CSS estão longe de atingir seu potencial, e às vezes tendemos a usar classes, ids, divs, spans, etc. excessivos e inúteis.
A melhor maneira de evitar que essas "pragas" se espalhem em sua marcação e mantê-la limpa e semântica é usar seletores CSS mais complexos que possam atingir elementos específicos sem usar classes ou ids extras, e desta forma também podemos fazer nosso código . e estilo mais flexível .
Prioridade CSS
Antes de nos aprofundarmos no domínio dos seletores CSS avançados, é importante entender como funcionam as prioridades CSS para que possamos saber como usar nossos seletores de maneira adequada e evitar perder muito tempo depurando algo, desde que prestemos atenção às prioridades. para resolver o problema se
Quando escrevemos CSS devemos estar cientes de que alguns seletores serão superiores a outros seletores na cascata. O seletor que escrevemos no final não substituirá necessariamente os estilos que escrevemos anteriormente no mesmo elemento.
Então, como você calcula a prioridade de um determinado seletor ? É muito simples se você considerar que as prioridades são expressas como quatro números separados por vírgulas, como: 1, 1, 1, 1 ou 0, 2, 0, 1
O primeiro número (a) geralmente é 0, a menos que o atributo style seja usado na tag;
O segundo número (b) é a soma do número de ids neste seletor;
O terceiro número (c) é o total de outros seletores de atributos e pseudoclasses usados neste seletor. Isso inclui classe (.example) e seletor de atributos (como li[id=red]);
O quarto número (d) conta elementos (como tabela, p, div, etc.) e pseudoelementos (como: primeira linha, etc.);
O seletor universal (*) tem prioridade 0;
Se dois seletores tiverem a mesma precedência, o último na folha de estilos terá efeito.
Vejamos alguns exemplos para ficar mais fácil de entender:
#barra lateral h2 —
h2.título —
h2 + p —
#barra lateral p:primeira linha —
No exemplo abaixo, o primeiro funcionará porque tem prioridade maior que o segundo:
#barra lateral p#primeiro { cor: vermelho } —
#barra lateral p:primeira linha { cor: azul } —
É importante ter pelo menos um entendimento básico de como funcionam as prioridades, mas algumas ferramentas como o Firebug, quando inspecionamos um elemento específico, listam todos os pares de seletores CSS em ordem de prioridade do seletor para nos informar qual deles está em um elemento específico. é útil para que os seletores sejam válidos.
Torna muito fácil ver qual seletor está agindo em um elemento.