Seletor ID do CSS

Seletor de ID

O seletor de ID pode especificar estilos específicos para elementos HTML marcados com um ID específico.

O seletor de ID é definido com "#".

Os dois seletores de ID abaixo, o primeiro pode definir a cor do elemento como vermelha, e o segundo define a cor do elemento como verde:

#red {color:red;}
#green {color:green;}

No código HTML abaixo, o elemento <p> cujo atributo de ID é red será exibido em vermelho, enquanto o elemento <p> cujo atributo de ID é green será exibido em verde.

<p id="red">Este parágrafo é vermelho.</p>
<p id="green">Este parágrafo é verde.</p>

Atenção:A propriedade de ID pode aparecer apenas uma vez em cada documento HTML. Quer saber o motivo? Consulte XHTML: reestruturação de sites.

Seletor de ID e seletor derivado

No layout moderno, o seletor de ID é frequentemente usado para criar seletores derivados.

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

Os estilos acima serão aplicados apenas aos parágrafos que aparecem dentro do elemento cujo ID é sidebar. Este elemento é provavelmente um div ou uma célula de tabela, embora possa ser uma tabela ou outro elemento de bloco. Mesmo que possa ser um elemento inline, como <em></em> ou <span></span>, essa utilização é ilegal, pois não é permitido嵌入 <p> dentro de elementos inline <span> (se esqueceu o motivo, consulte XHTML: reestruturação de sites)

Um seletor, várias utilizações

Mesmo que o elemento marcado como sidebar possa aparecer apenas uma vez no documento, este seletor de ID como seletor derivado pode ser usado várias vezes:

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

Aqui, os elementos p dentro do sidebar são tratados de maneira especial, diferindo claramente dos outros elementos p na página. Da mesma forma, os elementos h2 dentro do sidebar também recebem um tratamento especial, diferindo claramente dos outros elementos h2 na página.

Seletor isolado

O seletor ID pode funcionar sozinho, mesmo que não seja usado para criar seletores derivados:

#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

De acordo com esta regra, o elemento com id 'sidebar' terá uma borda pontilhada preta de um pixel de largura, além disso, terá uma margem interna (padding, espaço interno) de 10 pixels. Os navegadores Windows/IE de versões antigas podem ignorar esta regra, a menos que você defina especificamente o elemento ao qual este seletor pertence:

div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

Conteúdo Relacionado

Se você precisar aprender mais sobre seletores ID, leia o tutorial avançado do CodeW3C.com:Detalhamento do Seletor ID do CSS.