ID - CSS-Tricks

Anonim

O #idseletor permite que você direcione um elemento referenciando o idatributo HTML. Semelhante a como os atributos de classe são denotados em CSS com um “ponto” ( .) antes do nome da classe, os atributos de ID são prefixados com um “octothorpe” ( #), mais comumente conhecido como “hash” ou “sinal de libra”.

#header ( /* this is the ID selector */ background: #eee; )

Os valores do atributo ID devem ser únicos. HTML com dois ou mais ids idênticos não valida e produzirá resultados imprevisíveis. Se houver dois iguais, o CSS ainda combinará e estilizará ambos. JavaScript, entretanto, ao consultar um ID, encontrará o primeiro e parará.

Os seletores de ID são extremamente poderosos. Eles têm uma especificidade muito alta, geralmente escrita como (0, 1, 0, 0). Os estilos se aplicam a eles sobrescrevem outros seletores que usam apenas tags ou classes. Para demonstrar:

Confira esta Caneta!

Um parágrafo com um ID e atributo de classe está recebendo regras de CSS contraditórias; mesmo que o seletor de classe ( .reusable) esteja abaixo do seletor de ID ( #unique) no CSS (ele geralmente sobrescreve os estilos acima dele na "cascata"), o parágrafo permanece vermelho porque #uniqueoprime a cor azul sendo definida por .reusable. Uma quantidade infinita de classes nunca pode superar a especificidade do ID (embora tenha havido um bug em que 256 classes superariam um ID).

Alta especificidade e exclusividade significam que o uso #idé uma “opção nuclear” do CSS: sobrecarregado, inflexível e desproporcionalmente eficaz. Evitar o #idseletor em CSS é considerado uma prática recomendada: é preferível usar uma classe em quase todos os casos.

Dito isso, os atributos de ID têm vários usos valiosos fora do CSS:

  • Fornecimento de ganchos exclusivos para JavaScript
  • Elementos com idatributos podem ser direcionados por marcas âncora, definindo o hrefatributo para o idvalor, prefixado por um #símbolo. Clicar nesse link de âncora focalizará novamente a página atual no elemento com a correspondência id. Isso é chamado de “identificador de fragmento”.
  • Para elementos verdadeiramente únicos em seu HTML, como elementos de formulário, os IDs podem ser úteis para coisas como links labels e inputs.

Pontos de interesse

  • Um válido #idnão pode começar com um número e deve ter pelo menos um caractere. Uma grande parte do Unicode são caracteres válidos em um id.
  • id atributos e seletores diferenciam maiúsculas de minúsculas e devem corresponder exatamente em HTML, CSS e JavaScript

Suporte para navegador

cromada Safári Raposa de fogo Ópera IE Android iOS
Nenhum Nenhum Nenhum Nenhum Nenhum Nenhum Nenhum