O seletor ID

Nós começamos a parte do Seletor desde tutorial com o mais amplo seletor, que tem por alvo os elementos, então nós falamos sobre o seletor tipo classe que é mais específico, e agora nós iremos discutir sobre o mais específico tipo de seletor: o seletor ID. O seletor ID é tão específico que atinge somente um elemento da página!

Assim como nós vimos com o seletor de classe, o seletor ID usa um atributo específico encontrado em todas tags HTML para descobrir se a regra específica se aplica ou não ao elemento, e este é o atributo ID. O valor do atributo ID deve ser único, de acordo com a especificação do HTML, o que significa que ele só pode ser usado em um único elemento por página. Como consequência, o seletor ID deve também ser usado apenas quando você precisa aplicar a um, específico e único elemento em uma página.

Um seletor ID parece com um seletor de classe, mas ao invés de ter um ponto como prefixo, ele usa o sustenido como sinal (#). Vamos ver como ele funciona:

<style type="text/css">
#main-header {
	color: GreenYellow;
}
</style>

<h1 id="main-header">Hello, CSS!</h1>

Como você pode ver, funciona como os seletores de classes, mas ao invés de ponto, nós usamos o carácter sustenido, e no lugar de usar o atributo classe, nós usamos o atributo id - a diferença está no fato de que o ID deve ser único, como explicado na introdução deste capítulo.

Então porque usamos seletores ID afinal? Obviamente, ninguém irá forçar você - você pode usar seletores de classe no lugar de seletores ID, se você quiser. Mas ao usar um seletor ID, você especifica para você e para todos outros que forem escrever código para o seu CSS, que este seletor deve ser usado apenas em um único lugar. Isto é geralmente usado para os elementos da página principal, isto é, as tags que criam a estrutura da página (menu, side box, conteúdo principal e outros).

Além disso, você pode ter já especificado ID's para algumas de suas tags, por exemplo para referenciar eles de seu código JavaScript. Se assim for, você pode escrever um seletor ID CSS e ter ele aplicado automaticamente.

Seletores ID específicos de elemento

Assim como o seletor de classe, você pode limitar o seletor ID para um tipo de elemento especifico colocando o nome em frente do nome do seletor, desta forma:

h1#main-header {
	color: GreenYellow;
}

Desta maneira, este seletor ID específico irá aparecer apenas para a "tag" de cabeçalho (h1)

Resumo

Com o seletor ID você é bem específico ao segmentar todos elementos por nome/tipo ou nome de classe. O seletor ID, por definição, só aponta para um único elemento na página. Use-o principalmente para os maiores elementos ou para os elementos estruturais na sua página, ex: a navegação, área superior, conteúdo principal e assim por diante.