28

Gostaria de saber se o HTML trata por prioridade o id ou class.

Por exemplo, se eu estou montando minha estrutura e faço o seguinte:

<div class="teste1" id="teste2">TESTE</div>

O que ele vai fazer? Aceitar o que foi declarado primeiro? No caso o class. Se eu tivesse feito o inverso, seria o id?

E o !important é relevante nisso também?

3
  • Você pergunta o que foi declarado primeiro no CSS?
    – Maniero
    Commented 10/11/2014 às 11:14
  • Não. Pergunto o que o HTML irá aceitar primeiro. Commented 10/11/2014 às 11:27
  • 3
    Não sei se entendi, o HTML não tem que aceitar nada, até porque ele aceita os dois. Vou tentar responder o que eu acho que é possível responder. Se você não entender, você comenta e tento melhorar.
    – Maniero
    Commented 10/11/2014 às 11:29

4 Respostas 4

24

HTML

No HTML você sempre poderá ter ambos e nenhum terá prioridade sobre o outro. Não importa quais sejam eles. As duas informações são diferentes com funções diferentes, por isto elas coexistem e no exemplo postado elas não conflitam. Então ambos são aplicados sem problemas. O problema ocorre quando o mesmo nome é usado para os dois atributos. Tenha isso em mente. Vou mostrar abaixo o que acontece quando há conflito no CSS.

Lembro que id deve ser único para todo documento, mas class pode ser repetido para vários elementos e um elemento pode ter mais que uma classe (nem todos sabem disto). Em outras palavras não pode existir mais de um elemento com o mesmo ID, mas pode haver quantos elementos você quiser com a mesma classe. Ou seja, o ID é um identificador único do objeto do documento e a classe é um marcador para dizer que aquele objeto possui determinadas características, possivelmente em comum com outros objetos do documento. Fazendo uma analogia (meia-boca) com as perguntas aqui no SOpt pense no id como sendo o título do objeto, e o class como sendo tags para o objeto.

Você só deve usar ambos se tiver um motivo para usar. Na verdade não coloque nenhum destes atributos no objeto se ele não for útil para alguma coisa.

CSS

No CSS vai tratar cada um individualmente. Para definir o estilo para o class no CSS você fará com a diretiva . (iniciando com ponto). Para o id a diretiva usada é o #. Tudo que dá para fazer com um dá para fazer com o outro em termos de estilos no CSS.

Se tiver definição conflituosa para ambos o id terá prioridade sobre class (não seria o caso do seu exemplo). Pense, é mais provável que você queira dar um estilo mais específico para aquele objeto do que um estilo mais genérico, que é o caso da classe que serve vários objetos. O browser vai ignorar a classe porque o identificador possui uma definição de estilo que provavelmente se encaixa melhor para o objeto, afinal essa definição foi criada com esta especificidade.

Então o browser renderizará usando o estilo do id. É ele que será "aceito" em primeiro lugar. Não importa a ordem que ele foi declarado no HTML ou no CSS.

Vou repetir, isto só é relevante quando existem dois estilos com o mesmo nome.

#secao {
    color: #0000FF
}
.secao {
    color: #000000
}
<div id="secao" class="secao">Texto</div>

O texto terá cor azul e não preta.

O !important não afeta nada se não há realmente um conflito entre os dois. Esta diretiva só é útil quando há conflito, quando há duas definições diferentes para a mesma coisa. Veja o que acontece quando usamos ela na classe que conflita com o identificador.

#secao {
    color: #0000FF
}
.secao {
    color: #000000 !important
}
<div id="secao" class="secao">Texto</div>

Coloquei no GitHub para referência futura.

Se precisa usar !important tem grande chance do código estar mal escrito.

JavaScript

Para o Javascript faz diferença o uso do id, você precisa usá-lo para identificar o elemento específico que deseja manipular por código. Inclusive com JS e, é claro, jQuery, você pode até mesmo adicionar uma nova classe para uma elemento mas não pode fazer o mesmo com o id sob pena de ter problemas para identificar corretamente com o o que está mexendo.

Mais informações relevantes para ler em Qual seletor CSS tem prioridade?

3
  • Entendi perfeitamente. Passo a usar id somente para algo que eu vá fazer com JQUERY. Commented 10/11/2014 às 12:19
  • @FelipeStoker é uma opção. Para JavaScript realmente faz diferença tratar um ou outro.
    – Maniero
    Commented 10/11/2014 às 12:30
  • 2
    Quem negativou provavelmente não vai dizer o que tem errado mas estou aqui para aprender junto.
    – Maniero
    Commented 12/11/2014 às 18:34
8

As respostas presentes já endereçam bem o assunto, venho apenas complementar as existentes com algumas notas.

Sumário

A prioridade das propriedades de CSS num elemento são tratadas da seguinte forma:

Prevalecem as propriedades com a expressão !important, depois as que estão atribuídas no id que não tenham sido subscritas pela expressão e por último as atribuídas em class(s) que não tenham sido subscritas pela expressão ou pelo id.

A exemplificar

Em CSS, a regra é que o id é um seletor que tem que ser único na página, muito devido às suas aplicações em JavaScript, motivos os quais facultam ao mesmo uma precedência sobre qualquer class presente no mesmo elemento bem como estilos aplicados diretamente na tag desse elemento.

No entanto, convém advertir que a expressão !important existe para tornar um valor da respetiva propriedade de CSS mais importante que todos os outros, isto independentemente de id ou class:

div{                    /* estilo na tag */
  color:green;
}
.blue{                  /* estilo via class */
  color:blue;
}
#red{                   /* estilo via id */
  color:red;
}
.grey{                  /* estilo expresso como IMPORTANTE */
  color:grey!important;
}
<div>A minha cor via TAG</div>
<div class="blue">A minha cor via CLASS</div>
<div id="red">A minha cor via ID</div>
<div id="red" class="blue">A minha cor via ID + CLASS</div>
<div id="red" class="blue grey">A minha cor via ID + CLASS + !important</div>
<div id="red" class="grey blue">A minha cor via ID + !important +  CLASS</div>

De notar que a Mozilla Developer Network considera o uso de !important má prática:

Usando !important é uma prática ruim porque torna a depuração difícil, pois você quebrar a cascata natural em suas folhas de estilo.


Combinações

Podemos ainda completar a resposta com a questão das combinações de seletores.

Ao atribuirmos propriedades de CSS a um elemento, podemos atribuir as mesmas via class, id, tag, mas também com uma combinação.

Fica um exemplo de uma combinação com id + class que prevalece sobre as regras supra citadas, mas não prevalece sobre a expressão !important:

div{                        /* estilo na tag */
    color:green;
}
.blue{                      /* estilo via class */
    color:blue;
}
#red{                       /* estilo via id */
    color:red;
}
.grey{                      /* estilo expresso como IMPORTANTE */
    color:grey!important;
}

#red.bubu {                 /* combinação prevalece sobre as regras de ID */
    color:black;            /* ou class com excepção do que tem a expressão IMPORTANTE */
}
<div>A minha cor via TAG</div>
<div class="blue">A minha cor via CLASS</div>
<div id="red">A minha cor via ID</div>
<div id="red" class="blue">A minha cor via ID + CLASS</div>
<div id="red" class="blue grey">A minha cor via ID + CLASS + !important</div>
<div id="red" class="grey blue">A minha cor via ID + !important +  CLASS</div>

<div id="red" class="blue bubu">
    <small>A minha cor via ID + CLASS deveria dar vermelho, mas foi subscrito pela combinação "#red.bubu" para preto.</small>
</div>


Desambiguação sobre uso do id

Fiquei com a ideia que o conceito geral é que: "um id não deve ser utilizado para estilos", tal conceito deve ser considerado incorreto e passo a comprovar:

O uso do id para estilos em CSS é perfeitamente válido e tem por exemplo a mesma utilidade que o JavaScript lhe dá, ou seja, atingir um elemento especifico na página.

Se os estilos no id não fossem válidos, porque teria a W3C perdido tempo a implementar centenas de regras que trazem inúmeros trabalhos aos navegadores que as implementam e aos programadores que as tem que conhecer?

E a resposta pode ser encontrada na documentação:

7.5.2 Elementos identificadores: os atributos id e class

O atributo id tem vários papéis em HTML:

Como um seletor de folha de estilo.
Como uma âncora de destino para links de hipertexto.
Como forma de fazer referência a um elemento particular de um script.
Como o nome de um elemento OBJECT declarado.
Para o processamento de propósito geral por agentes do usuário (por exemplo, para a identificação de campos quando extrair dados de páginas HTML em um banco de dados, tradução de documentos HTML para outros formatos, etc.).

7

O seletor id tem maior precedência do que o seletor class. Então quando tiver ambos, o id sempre será aplicado.

.foo { color: blue }
#intro, #intro1 { color: red }
<p class="foo">Hello!</p>
<p id="intro1">Hello!</p>
<p id="intro" class="foo">Hello!</p>

Exemplo prático também no JSFiddle.

Recomendação: Evite usar id para atribuir estilos, pois o id deve ser únicos por página.

2

As repostas já estão muito boas, porém estudando sobre encontrei um exemplos que pode facilmente descobrir a predominância

A W3C criou uma forma de calcular a especificidade de seletores. Para entender de forma simples, basicamente distribuímos pesos diferentes as regras aplicadas:

  • CSS inline: 1000 pontos;
  • ID: 100 pontos;
  • Classes, pseudo-classe e atributos: 10 pontos;
  • Elementos: 1 ponto.

Na prática, podemos fazer cálculos como os exemplos a seguir:

p.foobar: 1 classe + 1 elemento = 11 pontos.

div#foobar .foo .bar: 1 ID + 1 elemento + 3 classes = 131

Definas os valores que achar necessário, mas lembre-se que a ordem de predominância está na sequência que descrevi acima.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .