Lição 7: Identificando e agrupando elementos (classes e id)

Em alguns casos você deseja aplicar estilos a um elemento ou grupo de elementos em particular. Nesta lição veremos como usar class e id para estilizar elementos.

Como definir uma cor para um determinado cabeçalho, diferente da cor usada para os demais cabeçalhos do website? Como agrupar links em diferentes categorias e estilizar cada categoria diferentemente? Estas são algumas das questões que iremos responder nesta lição.

Agrupando elementos com uso de classe

Vamos supor que temos duas listas de links para diferentes tipos de uvas usadas na produção de vinho branco e de vinho tinto. O código HTML conforme mostrado abaixo:

	<p>Uvas para vinho branco:</p>
	<ul>
	<li><a href="ri.htm">Riesling</a></li>
	<li><a href="ch.htm">Chardonnay</a></li>
	<li><a href="pb.htm">Pinot Blanc</a></li>
	</ul>

	<p>Uvas para vinho tinto:</p>
	<ul>
	<li><a href="cs.htm">Cabernet Sauvignon</a></li>
	<li><a href="me.htm">Merlot</a></li>
	<li><a href="pn.htm">Pinot Noir</a></li>
	</ul>
	
	

• Ver exemplo

Queremos que os links para vinho branco sejam na cor amarela, para vinho tinto na cor vermelha e os demais links na página permaneçam na cor azul.

Para conseguir isto, dividimos os links em duas categorias. Isto é feito atribuindo uma classe para cada link, usando o atributo class.

Vamos especificar esta classe no exemplo a seguir:

	<p>Uvas para vinho branco:</p>
	<ul>
	<li><a href="ri.htm" class="whitewine">Riesling</a></li>
	<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
	<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
	</ul>

	<p>Uvas para vinho tinto:</p>
	<ul>
	<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
	<li><a href="me.htm" class="redwine">Merlot</a></li>
	<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
	</ul>
	
	

Agora podemos definir propriedades específicas para links pertencentes as classes whitewine e redwine, respectivamente.

	a {
		color: blue;
	}

	a.whitewine {
		color: #FFBB00;
	}

	a.redwine {
		color: #800000;
	}
	
	

• Ver exemplo

Como mostrado no exemplo acima, pode-se definir propriedades para estilização dos elementos pertencentes a uma determinada classe usando um .nomedaclasse na folha de estilos do documento.

Identificando um elemento com uso de id

Além de agrupar elementos podemos querer atribuir identificação a um único elemento. Isto é feito usando o atributo id.

O que há de especial no atributo id é que não poderá existir dois ou mais elementos com a mesma id, ou seja em um documento apenas um e 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. A seguir um exemplo de possível uso de id:

	<h1>Capítulo 1</h1>
	...
	<h2>Capítulo 1.1</h2>
	...
	<h2>Capítulo 1.2</h2>
	...
	<h1>Capítulo 2</h1>
	...
	<h2>Capítulo 2.1</h2>
	...
	<h3>Capítulo 2.1.2</h3>
	...
	
	

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">CCapítulo 2.1</h2>
	...
	<h3 id="c2-1-2">Capítulo 2.1.2</h3>
	...
	
	

Vamos supor que o cabeçalho do capítulo 1.2 deva ser na cor vermelha. Isto pode ser feito conforme mostrado na folha de estilo a seguir:

	#c1-2 {
		color: red;
	}
	
	

• Ver exemplo

Como mostrado no exemplo acima, podemos definir propriedades para um elemento específico usando um seletor #id na folha de estilos para o documento.

Sumário

Nesta lição você aprendeu que com o uso dos seletores class e id, é possível definir propriedades CSS para elementos específicos.

Na próxima lição trataremos de dois elementos do HTML largamente usados com as CSS: <span> e <div>.