Home
índice (CSS)
Página anterior

Id e Classe

Além de definir um estilo para um elemento HTML, CSS permite a especificação de seletores chamados "id" e "classe". O seletor ID é diferente do seletor Classe, porque é único. Um seletor ID de determinado nome só pode ser aplicado a um elemento HTML. Pode-se "criar" um nome e com ele criar um ID ao qual serão definidas as regras CSS. Um determinado ID só pode ser aplicado a um elemento HTML.

Sintaxe para o seletor ID:

O selector ID é usado para especificar um modelo de um único elemento, original. Este seletor usa o atributo id do elemento HTML, e é definido com um "#".

Identificando um elemento com uso de id

Lembrete:

Nesse caso será atribuída ao elemento inline <em> uma id, porque esse elemento <em>, já foi declarado com a cor verde. Lembrete será na cor roxa. Como já foi dito, somente um elemento poderá ter uma determinada id. Cada id é única. Para casos em que haja necessidade de mais de um elemento com a mesma identificação usamos o atributo class.

Na folha de estilo ficaria assim:

Outros exemplos de uso do id:

Capítulo 1

...

Capítulo 1.1

...

Capítulo 1.2

...

Capítulo 2

...

Capítulo 2.1

...

Capítulo 2.1.2

...

O exemplo acima simula os cabeçalhos de um documento estruturado em capítulos e parágrafos. É comum atribuir uma id para cada capítulo como mostrado a seguir:

<h1 id="c1">Capítulo 1</h1>
...
<h2 id="c1-1">Capítulo 1.1</h2>
...
<h2 id="c1-2">Capítulo 1.2</h2>
...
<h1 id="c2">Capítulo 2</h1>
...
<h2 id="c2-1">Capítulo 2.1</h2>
...
<h3 id="c2-1-2">Capítulo 2.1.2</h3>
...

Se o cabeçalho do capítulo 1.2 for na cor verde.

Nota: Como foi dito pode-se definir propriedades para um elemento específico usando um seletor #id na folha de estilos do documento.

Obs.: Os números e caracteres especiais devem ser evitados. Se possível usar só letras de a-z e de A-Z . Há restrições quanto ao uso de números e caracteres. (deve-se usar apenas letras e os caracteres - (traço) e _ (sublinhado).) A HTML5 acabou com a restrição dos caracteres e em sua sintaxe pode-se usar qualquer caracter menos espaço em branco.