ID selector em CSS- Seletor do tipo ID e sua diferença com o CLASS

Neste tutorial de nosso Curso de CSS, iremos falar de um dos elementos mais usados em HTML, tanto para CSS como para a linguagem de programação JavaScript, que são os seletores do tipo ID.

Obtenha seu certificado do Curso de Webmaster

ID selector - O seletor de identificação em CSS

No tutorial passado de nossa Apostila de CSS falamos sobre o seletor class e vimos o incrível poder e flexibilidade que ele nos trás, pois podemos agrupar diversos trechos de nosso código em uma classe, identificar essa classe da maneira que bem quisermos e aplicar definições de estilo CSS neste trecho especificamente.

Os seletores do tipo id também servem para identificar o trecho de um código HTML para que possamos fazer o CSS atuar nele.
Mas se parar parar pensar, o seletor class também faz esse trabalho.

A principal característica do id selector é que ele serve para identificar (daí vem o nome id) uma parte única do código, diferente do class, que tem usos mais gerais e pode ser usado o mesmo nome várias vezes num mesmo documento de HTML.

E, mais uma vez, assim como o seletor class, a sintaxe do seletor id é quase idêntica.
A primeira parte é colocar o atributo id dentro de uma tag, de um trecho qualquer de seu código HTML e atribuir um valor a este atributo id.

O valor deste id é você quem escolhe, segundo as regras que usamos no atributo class.
Escolha um nome único, que descreve aquele elemento especificamente.
Assim, a sintaxe do uso de id no código HTML é:
<TAG id="identificador">

Por exemplo, vamos identificar diversos cabeçalhos:
<h1 id="primeiroH1">Cabeçalho principal</h1>
<h1 id="segundoH1">Cabeçalho secundário</h1>
<h1 id="ultimoH1">Último cabeçalho do artigo</h1>

Já dentro do CSS, para aplicarmos um estilo a um identificador usamos o símbolo de hashtag # seguido do nome do identificador.
É como fizemos no seletor CLASS, mas lá era com um ponto (.).
Veja:
#primeiroH1{
  regras CSS para o primeiro <h1>;
}
 
#segundoH1{
  regras CSS para o segundo <h1>;
}
 
#ultimo{
  regras CSS para o último <h1>;
}

Qual a diferença entre CLASS e ID ?

Estudando este artigo de tutorial e o tutorial passado sobre o seletor class, uma dúvida surge e atormenta os iniciantes em CSS: quando usar class e quando usar id ?

Realmente, vendo os códigos do ID e de CLASS só muda mesmo que em ID usamos o símbolo de hash (#) e em classes usamos o ponto (.)

ID e JavaScript

Sem dúvidas, um dos usos mais importantes do seletor id é para JavaScript.
Como o nome do seletor diz, ele serve para identificar um elemento, sendo vastamente usado em formulários HTML.

Através da linguagem de programação para werb JavaScript, podemos nos comunicar diretamente com cada elemento de um código HTML, devidamente identificado por seu id.
Por exemplo, em formulários, damos um nome a cada elemento do formulário e através disso o JavaScript ou PHP poderá saber as informações fornecidas pelos usuários ao preencher o form:
<input type="text" id="email">
<input type="password" id="senha">
<select name="estado" id="uf">

Ou seja, identificando cada membro, ele terá um nome único, que é só dele, assim uma linguagem de programação pode obter e trabalhar junto de um local específico do HTML, pois tem como identificar aquele trecho pelo seu nome.

ID é única, CLASS pode não ser

Os exemplos de formulários passado mostram uma das grandes diferenças entre id e class: as id são únicas, não podemos ter dois elementos de um formulário com a mesma id.

Nos Estados Unidos se referem a ID como nosso RG, ou seja, como sua identificação, o nome não é à toa, se soube inglês vai sempre lembrar que ID é algo único, não pode repetir ou aplicar uma ID com mesmo nome em dois ou mais elementos.

Já o atributo class pode ter o mesmo valor (mesmo nome da classe) em diversas tags.
Por exemplo, podemos colocar class="link" em diversos links de uma página, então quando aplicarmos o efeito CSS nessa class, todos os links que tem esse atributo com este valor serão afetados.




ID e Links âncora (links para saltos na mesma página)

Uma utilidade bem interesse do seletor id é para a criação de links do tipo âncora, que são links para acessar diferentes partes em uma mesma página.
Embora estejamos na seção sobre CSS de nosso curso, o uso do atributo id para este fim é algo do HTML, e não do CSS, pois na prática não estamos aplicando nenhum estilo as páginas de nossos sites.

Esse tipo de técnica e uso do ID é geralmente usado em páginas de FAQ, de perguntas em respostas.
Costumam ter um sumário das perguntas, aí você clica nelas e a tela da página começa a rolar automaticamente, e para exatamente na pergunta que você selecionou.
Em seguida você clica em "topo" e a página sobe lá para cima e você vê as perguntas novamente.

Para fazer isto é bem simples.
Primeiro você precisa identificar todos os elementos de uma página na qual os links vão apontar. No exemplo da FAQ (Perguntas & Respostas), vamos supor que cada pergunta está dentro de um cabeçalho H2 (<h2>). Fica:
<h2 id="pergunta1">Pergunta 1</h2>
<h2 id="pergunta2">Pergunta 2</h2>
<h2 id="pergunta3">Pergunta 3</h2>

A segunda parte é a criação de links com a tag <a>, e em vez de colocar o endereço "URL" no atributo href coloque "URL#ID", onde "ID" é o nome que você deu a cada elemento da página que quis identificar (no caso, as perguntas nas tags <h2>)
<a href="www.seusite.com.br/pagina.html#pergunta1">Pergunta 1</a>
<a href="www.seusite.com.br/pagina.html#pergunta2">Pergunta 2</a>
<a href="www.seusite.com.br/pagina.html#pergunta3">Pergunta 3</a>

Como, criamos dois identificadores para este tutorial de nosso curso, os "id-selector" e "diferenca", que vão para os títulos principais desta página (http://www.htmlprogressivo.net/2014/01/ID-selector-CSS-Seletor-tipo-ID-diferenca-CLASSE.html), veja:

ID Selector
A diferença entre ID e CLASS

Em CSS, o seletor ID se sobressai ao seletor CLASS

É perfeitamente possível aplicar um seletor do tipo ID e um de tipo CLASS a um mesmo elemento de um código HTML.

Por exemplo, vamos supor que em todos os links, tags <a>, de um página tenha um seletor class com o valor "links" (nome da classe), pois queremos aplicar um mesmo estilo em todos os links (uma mesma cor, por exemplo).

Vamos supor que você criou um mega tutorial de CSS com 10 partes, e em todos os links desses artigos são da cor azul e sublinhados, como é o comum.
Porém, em tutoriais com diversas páginas, é comum ter um link "anterior" e "próximo", apontando para a parte anterior e para a próxima página do tutorial.

Ou seja, esses dois links são especiais, você quer que eles tenham cores e fontes diferentes.
Então você coloca um seletor id no primeiro link (id="anterior") e no segundo (id="proximo").
Note que estes dois links terão tanto o seletor class (class="links") como o seletor id (id="anterior" ou id="proximo").

Na sua folha de estilos CSS você define que todo elemento da classe "links" vai ser azul e com sublinhado, e também define que os links com id "anterior" ou "proxima" vão ser vermelhos e em negrito.

Ou seja, há um aparente conflito. Mas como dissemos no título desta seção do artigo, o seletor ID se sobressai ao seletor CLASS, então os links "anterior" e "próximo" serão vermelhos e em negrito.
Embora estes links tenham recebido dois estilos, é óbvio que não pode fazer os dois ao mesmo tempo, e nesses casos a prioridade é sempre vencida pelo seletor ID, pois ele é mais específico e único.

Note que você pode ter milhões de links nos seus artigos, todos vão ser azuis e sublinhados, somente os links "anterior" e "proxima" serão vermelhos e negrito.
E você fez isso de uma maneira totalmente automatizada e escrevendo pouquíssimas linhas no seu arquivo CSS.

Interessante este CSS, não?

Nenhum comentário: