Especificação Redirect 1

O Conceito

A especificação é a maneira de como os navegadores definem quais valores de propriedades são os mais relevantes para o elemento a ser utilizado. A especificação é baseada apenas nas regras impostas na composição de diferentes tipos de seletores.

Como isso é calculado?

A espeficicação é calculada na concatenação  da contagem de cada tipo de seletor. Não é um peso aplicado na expressão correspondente.

No caso de igualdade de especificação, a última declaração encontrada no CSS é aplicada ao elemento.

Note: O fato de elementos estarem próximos na árvore do documento não tem efeito sobre a especificação.

Ordem crescente de especificação

A seguinte lista de seletores está incluida na especificação:

  • Seletores Universais
  • Tipo de Seletores
  • Classes seletoras
  • Atributos Seletores
  • Pseudo-classes
  • Seletores ID
  • Estilo Inline

A exceção !important

Quando a regra !important é utilizada na declaração do estilo substitui qualquer outra declaração feita no CSS, onde quer que esteja na lista de declaração. Contudo, !important não tem nada haver com especificação.

A exceção :not

A pseudo-classe de negação :not não é considerada uma pseudo-classe no cálculo de especificação. Contudo, seletores colocados na pseudo-class de negação são entendidos como seletores normais.

Aqui está um trecho de CSS:

div.outer p {
  color:orange;
}
div:not(.outer) p {
  color: lime;
}

Usado com o seguindo código HTML:

<div class="outer">
  <p>Esta é a div outer.</p>
  <div class="inner">
    <p>Este texto está na div inner.</p>
  </div>
</div>

Irá aparecer na tela assim:

Esta é a div outer.

Este texto está na div inner.

Especificação Form-based

A especificação é baseada na forma de um seletor. No seguinte caso, o seletor contém os atributos no algoritmo de determinação de especificação, embora ele selecione um ID.

A seguir veja as declarações de estilo:

* #foo {
  color: green;
}
*[id="foo"] {
  background: purple;
}

Usado com esta marcação:

<p id="foo">Eu sou um simples texto.</p>

Vai acabar parecendo algo como:

Eu sou um simples texto.

Porque coincide com o mesmo elemento, mas o seletor de ID tem uma especificação superior.

Estrutura aproximada

A seguir a declaração do estilo:

body h1 {
  color: green;
}
html h1 {
  color: purple;
}

Com o HTML seguinte::

<html>
<body>
  <h1>Aqui está o título!</h1>
</body>
</html>

Vamos ter algo como:

Aqui está o título!

Veja Também

Etiquetas do documento e colaboradores

 Última atualização por: fvargaspf@gmail.com,