Seletores

Esta página explica como você pode aplicar estilos seletivamente, e como diferentes tipos de seletor têm propriedades diferentes.

Você adiciona alguns atributos às tags do seu documento de amostra, e usa estes atributos em sua folha de estilo de amostra.

Informação: Seletores

CSS tem sua própria terminologia para descrever a linguagem CSS. Anteriormente neste tutorial, você criou uma linha em sua folha de estilo com esta:

strong {color: red;}

Na terminologia das CSS, esta linha inteira é uma regra. Esta regra começa com STRONG, que é um seletor. Isto seleciona que elementos no DOM a regra se aplicará.

Mais detalhes
A parte interior das chaves é a declaração.

A palavra-chave color é uma propriedade, e red é um valor.

O ponto-e-vírgula depois do par propriedade-valor separa isto de outros pares propriedade-valor na mesma descrição.

Este tutorial refere-se a um seletor STRONG, como um seletor de tag. A Especificação das CSS refere-se a isto como um seletor de tipo.

Esta página do tutorial explica mais sobre os seletores que você pode usar nas regras das CSS.

Em adição aos nomes de tags, você pode usar valores de atributo nos seletores. Isto permite a você que as regras tornem-se mais específicas.

Dois atributos tem estado especial para as CSS. Eles são class e id.

Use o atributo class em uma tag para nomear a tag com um nome de classe. Isto é, o nome que você escolher para a classe.

Na sua folha de estilo, digite um registro completo (período) antes do nome de classe quando você usá-lo em um seletor.

Use o atributo id em uma tag para nomear a tag com um nome de id. Isto é, o nome que você escolher para o id. O nome do id deve ser único no documento.

Na sua folha de estilo, digite um sinal de número (#) antes do id quando você usá-lo em um seletor.

Exemplos
Este tag HTML tem ambos os atributos class e id.
<P class="key" id="principal">

O id, principal, deve ser o único no documento, mas outras tags no documento podem ter o mesmo nome de classe, key.

Em uma folha de estilo CSS, esta regra faz todos os elementos da classe key verdes. (Eles podem não ser todos elementos P.)

.key {color: green;}

Esta regra faz um elemento com o id principal negrito:

#principal {font-weight: bolder;}

Se mais de uma regra se aplicar a um elemento e especificar a mesma propriedade, então CSS dará prioridade para a regra que tiver o seletor mais específico. Um seletor id é mais específíco que um seletor classe, que por sua vez é mais específico que um seletor tag.

Mais detalhes
Você pode combinar seletores para fazer um seletor mais específico.

Por exemplo, o seletor .key seleciona todos os elementos que tem o nome de classe key. O seletor p.key seleciona somente os elementos P que tiverem o nome de classe key.

Você não está restrito aos dois atributos especiais, class e id. Você pode especificar outros atributos igualando entre colchetes. Por exemplo, o seletor [type=button] seleciona todos os elementos que tiverem um atributo type com o valor button.

Uma página posterior deste tutorial (Tabelas) tem informações sobre seletores complexos baseados em parentescos.

Para um informação completa sobre seletores, veja Selectors na CSS Specification.

Se sua folha de estilo tiver regras conflitantes e elas estiverem igualmente especificadas, então CSS dará prioridade para a regra que foi especificada por último na folha de estilo.

Quando você tiver um problema com regras conflitantes, tente resolvê-lo fazendo uma das regras mais especificada, então ela terá prioridade. Se você não puder fazer isto, tente mover uma das regras para mais perto do fim da folha de estilo, então esta terá prioridade.

Ação: Usando seletores de classe e id

Edite seu arquivo HTML, e duplique o paragrafo copiando e colando-o. Então adicione os atributos de id e classe na primeira cópia, e um id na segunda cópia como mostrado abaixo. Um alternativa é copiar e colar o arquivo inteiro novamente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Documento de amostra</TITLE>
  <LINK rel="stylesheet" type="text/css" href="style1.css">
  </HEAD>
  <BODY>
    <P id="first">
      <STRONG class="carrot">C</STRONG>ascading
      <STRONG class="spinach">S</STRONG>tyle
      <STRONG class="spinach">S</STRONG>heets
    </P>
    <P id="second">
      <STRONG>C</STRONG>ascading
      <STRONG>S</STRONG>tyle
      <STRONG>S</STRONG>heets
    </P>
  </BODY>
</HTML>

Agora edite seu arquivo CSS. Substitua os componentes inteiros com:

strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}


Atualize seu navegador para ver o resultado:

Cascading Style Sheets
Cascading Style Sheets


Você pode tentar re-dispor as linhas no seu arquivo CSS para mostrar que a ordem não muda o efeito.

Os seletores de classe .carrot e .spinach tem prioridade sobre o seletor de tag STRONG.

O seletor id #first tem prioridade sobre a classe o os seletores de tag.

Desafios
Sem mudar seu arquivo HTML, adicione uma única regra para seu arquivo CSS deixando todas as letras iniciais da mesma cor que estão agora, mas fazendo todo o segundo parágrafo aparecer em azul:
Cascading Style Sheets
Cascading Style Sheets

Agora mude a regra que você acabou de adicionar (sem mudar mais nenhuma coisa), para fazer o primeiro parágrafo em azul também:

Cascading Style Sheets
Cascading Style Sheets

O que vem depois?

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

Sua folha de estilo de amostra está começando a parecer densa e complicada. A próxima página descreve caminhos para fazer o CSS mais fácil de ler: CSS legível

Etiquetas do documento e colaboradores

Etiquetas: 
Contributors to this page: fscholz, teoli, Verruckt, Leandro Mercês Xavier
Última atualização por: fscholz,