Seletores de ID

Lição 5 de 15 do curso Seletores CSS da Coddy.

Um seletor de ID é um tipo de seletor CSS que seleciona elementos que possuem um atributo ID específico. O atributo ID é um atributo personalizado que você pode adicionar a elementos HTML para identificá-los de forma única.

Para selecionar elementos com um ID específico, você usa um símbolo de cerquilha (#) seguido pelo valor do ID. Por exemplo, o seletor #my-id seleciona o elemento com o ID my-id.

Aqui está um exemplo de como usar um seletor de ID para estilizar uma página web:

#my-id {
  color: red;
  font-size: 2em;
}

Para adicionar um id a um elemento, escreva:

<div id="my-id"></div>

Assim como os seletores de Classe, esta regra CSS estilizará o elemento com o ID my-id para ser vermelho e ter um tamanho de fonte de 2em.

Desafio

Fácil

Aqui está um exercício para testar sua compreensão dos seletores de ID:

Crie uma página web com dois elementos div.
Atribua ao primeiro elemento div o ID my-id.
Use um seletor de ID para estilizar o elemento div com o ID my-id para ter qualquer cor que não seja preto e ter um tamanho de fonte de 30px.

Experimente você mesmo

<html>
<head>
  <title>ID Selector Exercise</title>
  <style>
    /* CSS Code goes here */
  </style>
</head>
<body>
    
</body>
</html>

Todas as lições de Seletores CSS

1Introdução aos Seletores CSS

Objetivo dos Seletores CSS Por que eles são importantes?

4Seletores de atributo

Introdução aos seletores de atributo Presença e valores exatos Seletores de valor de atributo Seletores de valor de atributo II Seletores de valor de atributo III

2Seletores simples

Seletores de tipo Seletores de classeSeletores de IDSeletores universais

3Seletores Combinadores

Seletor de filho Seletor de descendente Seletor de irmão adjacente Seletor de irmão geral