Detalhamento do Seletor id do CSS

O seletor de ID permite especificar estilos de maneira independente dos elementos do documento.

Seletor de ID CSS

Em alguns aspectos, o seletor de ID é semelhante ao seletor de classe, mas há algumas diferenças importantes.

Sintaxe

Primeiro, o seletor de ID tem um símbolo # - também conhecido como símbolo de tabuleiro ou #.

Veja as seguintes regras:

*#intro {font-weight: negrito;}

Como o seletor de classe, o seletor de ID pode ignorar o seletor de asterisco. O exemplo anterior também pode ser escrito da seguinte forma:

#intro {font-weight:bold;}

O efeito deste seletor será o mesmo.

A segunda diferença é que o seletor de ID não faz referência ao valor da propriedade class, mas sem dúvida deve fazer referência ao valor da propriedade id.

Aqui está um exemplo real de um seletor de ID:

<p id="intro"<p>This is a paragraph of introduction.</p>

Experimente você mesmo

Seletor de classe ou seletor de ID?

No capítulo sobre seletores de classe, explicamos que é possível atribuir classes a vários elementos. No capítulo anterior, o nome da classe 'important' foi aplicado aos elementos p e h1, e ele também pode ser aplicado a mais elementos.

Diferença 1: pode ser usado apenas uma vez no documento

Diferente das classes, no documento HTML, o seletor de ID é usado uma vez e apenas uma vez.

Diferença 2: não pode usar lista de palavras para ID

Diferente do seletor de classe, o seletor de ID não pode ser usado conjuntamente, pois a propriedade ID não permite uma lista de palavras separadas por espaços.

Diferença 3: os IDs podem conter mais significado

Como as classes, os IDs podem ser escolhidos independentemente dos elementos. Em alguns casos, você sabe que um determinado valor de ID aparecerá no documento, mas não sabe em qual elemento ele aparecerá, então você deseja declarar um seletor de ID independente. Por exemplo, você pode saber que em um documento específico haverá um elemento com o valor de ID 'mostImportant'. Você não sabe se essa coisa mais importante é um parágrafo, uma frase, um item de lista ou um título de seção. Você sabe apenas que cada documento terá um conteúdo mais importante, que pode estar em qualquer elemento e que pode aparecer apenas uma vez. Neste caso, você pode escrever as seguintes regras:

#mostImportant {cor: vermelha; fundo: amarelo;}

Esta regra coincidirá com os seguintes elementos (esses elementos não podem aparecer ao mesmo tempo no mesmo documento, pois eles têm valores de ID iguais):

<h1 id="mostImportant"Isso é importante!
<em id="mostImportant"Isso é importante!
<ul id="mostImportant">This is important!</ul>

Experimente pessoalmente:

Case-sensitive

Observe que os seletores de classe e id podem ser case-sensitive. Isso depende do idioma do documento. HTML e XHTML definem valores de classe e id como case-sensitive, portanto, os valores de classe e id devem coincidir com os valores correspondentes no documento.

Portanto, para o seguinte CSS e HTML, o elemento não se tornará em negrito:

#intro {font-weight:bold;}
<p id="Intro"<p>This is a paragraph of introduction.</p>

Devido às diferenças de maiúsculas e minúsculas da letra i, o seletor não coincidirá com os elementos acima.