O #id
seletor permite que você direcione um elemento referenciando o id
atributo 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 id
s 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 #unique
oprime 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 #id
seletor 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
id
atributos podem ser direcionados por marcas âncora, definindo ohref
atributo para oid
valor, prefixado por um#
símbolo. Clicar nesse link de âncora focalizará novamente a página atual no elemento com a correspondênciaid
. 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
label
s einput
s.
Pontos de interesse
- Um válido
#id
nã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 umid
. 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 |