O seletor "Class"

Anteriormente nós demos uma olhada nos seletores de elementos, os quais apontam para todos elementos (que normalmente se traduzem em tags HTML) na página. Se nós quisermos ser mais específicos, seletores de classes são o próximo passo. Ao invés de apontar para todos elementos com um nome específico, eles apontam para todos os elementos que tem um nome de classe específico especificado.

Enquanto isso normalmente torna a lista de alvos mais restrita, também dá a oportunidade de apontar para elementos de vários tipos (Ex: ambas as tags itálico e negrito) ao mesmo tempo - com o seletor de classe, o nome/tipo de elemento não é mais uma parte importante.

O seletor de classe se parece com um seletor de elemento, mas ao invés de usar nomes que são atrelados aos nomes dos elementos HTML, você "maquia" o nome e então adiciona o ponto(.) como prefixo. Por exemplo:

• .vermelho {}
• .meusElementos {}
• .navegacao {}

Só elementos que usam um ou vários destes nomes de classe se tornam alvo. Permita-me ilustrar como isso funciona em um exemplo:

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

.beautiful {  
    font-weight: bold;  
    color: Blue;  
    font-style: italic;  
}  
</style>  

<p class="red">  
    Here's some text - <span class="beautiful">this part is especially pretty!</span>  
</p>

This text is very normal!

Teste o exemplo e veja o resultado por si mesmo. Note que dois elementos de parágrafo similiares agora se parecem completamente diferentes porque nós adicionamos uma classe ao primeiro.

Perceba também como eu posso nomear os seletores da maneira que eu quiser - os dois nomes são na verdade um ótimo exemplo de convenção de nomeação ruim e boa (ou pelo menos melhor). O nome "vermelho" não é um bom nome porque a regra poderia facilmente conter mais de uma regra relacionada à cor ou a cor poderia facilmente ser modificada caso fosse modificado o design para azul. O último nome é melhor porque é mais genérico e não transmite uma cor específica ou aparência específica.

Classes específicas para um Element

No nosso primeiro exemplo, todos os tipos de elementos poderiam usar nossas classes mas, em algumas situações, você pode querer limitar o uso a um tipo específico de elemento. Isso é normalmente feito para indicar como a classe deveria ser usada, para permitir mais de uma classe com o mesmo nome e evitar conflitos.

<style type="text/css">
span.beautiful {
    font-weight: bold;
    color: Blue;
    font-style: italic;
}
</style>

<p>
    Here's some <b class="beautiful">text</b> - <span class="beautiful">this part is especially pretty!</span>
</p>

Teste o exemplo e note como mesmo embora nós tentemos usar a classe beautiful em dois lugares, só funciona no elemento span porque agora nós exigimos isso.

Diversas classes

As classes não são únicas e a propriedade "classe" de uma tag HTML permite a você especificar mais de uma classe. O que há de legal sobre isso é que isto lhe permite combinar as regras para muitos seletores e usar elas para a mesma tag onde quer que você queira.

Isso também significa que ao invés de escrever seletores com muitas regras e então só apontar para poucos elementos, voce pode escrever menos seletores específicos e simplesmente combinar eles quando for apropriado. Isso permite grande reusabilidade o que é realmente o que o CSS é.

Dê uma olhada neste exemplo:

<style type="text/css">
.status {
    padding: 5px;
    margin: 5px;
    border-width: 1px;
    border-style: solid;
}

.error {
    color: Red;
    border-color: Maroon;
}

.information {
    color: Blue;
    border-color: Navy;
}
</style>

<div class="status error">
    This is an error!
</div>

<div class="status information">
    This is information!
</div>

Aqui nós usamos o CSS para mostrar informação de status. Nós temos um seletor comum .status e então nós temos um seletor para mensagens de erro e um para mensagens de informação. Mensagens de erro e informação obviamente compartilham coisas, uma vez que elas são ambas um tipo de mensagem, mas elas também tem aparências distintas. Então nós colocamos as coisas compartilhadas em uma classe chamada .status e então colocamos o restante em classes diferentes, chamadas .error e .information, e então nós usamos elas nas tags div simplesmente separando o nome delas com um espaço.

Sem a classe comum .status, nós teríamos de repetir todas as propriedades para cada classe, o que seria um desperdício de banda e nos forçaria a modificar as coisas em muitos lugares sempre que nós quiséssemos bordas mais grossas ou algo tipo isso.

Resumo

Como foi demonstrado, as classes CSS são muito versáteis - elas podem ser tão específicas ou não-específicas quanto você quiser que elas sejam e você pode usar elas para todos tipo de elementos, ou não, dependendo se o elemento se referencia à classe ou não. Isso torna as classes o tipo de seletor mais flexível que você pode usar em CSS. No próximo capítulo, nós vamos dar uma olhada no seletor de ID, o qual é mais específico ainda.