The Element selector

O tipo mais básico de seletor é provavelmente aquele que simplesmente aponta para um elemento HTML existente. Por exemplo, você pode apontar para todos os elementos que representam parágrafos (<p>) simplesmente escrevendo o nome dele na sua folha de estilos.

p {
	color: Red;
}

Com esta regra simples, nós mudamos a cor do texto de todos os parágrafos para vermelho - o seletor de elemento é muito poderoso.

Você pode apontar qualquer um dos elementos válidos do HTML desta forma e mesmo elementos não existentes podem ser apontados - se você quiser uma tag <tiger> na sua página, você é livre para escrever um seletor CSS que aponta para seu elemento "tigre" (apesar de que ele não será validado!).

Então, na maior parte do tempo, seus seletores de elementos apontarão para sua tag HTML de sempre. Por exemplo, você pode decidir que que as tags marcadas para ficarem em negrito não devem mais ficar em negrito:

b {
	font-weight: normal;
}

A folha de estilo interna da maioria dos navegadores dita que as tags em negrito devem possuir texto em negrito mas, com o poder do CSS, você pode facilmente mudar isto, tanto localmente (falaremos mais sobre isso mais tarde) quanto globalmente, como nós recém fizemos.

Aqui está um exemplo mais completo, onde nós usamos o que recém aprendemos. Sinta-se livre para conferir e brincar com isso para ver como funciona.

<style type="text/css">
p {
	color: Red;
}

b {
	font-weight: normal;
}
</style>

<p>Here's a paragraph!</p>

<p>Here's another <b>paragraph</b> - the word paragraph would normally be bold here!</p>

Summary

Então a maior vantagem de seletores de elementos é que eles são globais - em todo lugar em que sua folha de estilos estiver incluída estas regras afetarão seus elementos. Obviamente isso é também a maior desvantagem dos seletores de elementos, porque às vezes isso é exatamente o que você não quer. Felizmente há muitas outras opções, incluindo classes e seletores de ID os quais nós veremos a seguir.