path: root/files/pt-pt/learn/css/building_blocks/selectors/index.html

---
title: Seletores
slug: Web/CSS/Como_começar/Seletores
tags:
  - 'CSS:Como_começar'
translation_of: Learn/CSS/Building_blocks/Selectors
translation_of_original: Web/Guide/CSS/Getting_started/Selectors
---
<p>{{ PreviousNext("CSS:Como começar:Cascata e herança", "CSS:Como começar:CSS legível") }}</p>

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

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

<h2 id="Informa.C3.A7.C3.A3o:_Seletores" name="Informa.C3.A7.C3.A3o:_Seletores">Informação: Seletores</h2>

<p>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:</p>

<div style="width: 30em;">
<pre>strong {color: red;}
</pre>
</div>

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

<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;">
 <caption>Mais detalhes</caption>
 <tbody>
  <tr>
   <td>A parte interior das chaves é a <em>declaração</em>.
    <p>A palavra-chave <code>color</code> é uma <em>propriedade</em>, e <code>red</code> é um <em>valor</em>.</p>

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

    <p>Este tutorial refere-se a um seletor <code>STRONG</code>, como um seletor de <em>tag</em>. A Especificação das CSS refere-se a isto como um seletor de <em>tipo</em>.</p>
   </td>
  </tr>
 </tbody>
</table>

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

<p>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.</p>

<p>Dois atributos tem estado especial para as CSS. Eles são <code>class</code> e <code>id</code>.</p>

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

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

<p>Use o atributo <code>id</code> 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.</p>

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

<table style="border: 1px solid #36b; background-color: #ffe; padding: 1em;">
 <caption>Exemplos</caption>
 <tbody>
  <tr>
   <td>Este tag HTML tem ambos os atributos <code>class</code> e <code>id</code>.
    <div style="width: 30em;">
    <pre>
&lt;P class="key" id="principal"&gt;
</pre>
    </div>

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

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

    <div style="width: 30em;">
    <pre>
.key {color: green;}
</pre>
    </div>

    <p>Esta regra faz um elemento com o id <code>principal</code> negrito:</p>

    <div style="width: 30em;">
    <pre>
#principal {font-weight: bolder;}
</pre>
    </div>
   </td>
  </tr>
 </tbody>
</table>

<p>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.</p>

<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;">
 <caption>Mais detalhes</caption>
 <tbody>
  <tr>
   <td>Você pode combinar seletores para fazer um seletor mais específico.
    <p>Por exemplo, o seletor <code>.key</code> seleciona todos os elementos que tem o nome de classe <code>key</code>. O seletor <code>p.key</code> seleciona somente os elementos P que tiverem o nome de classe <code>key</code>.</p>

    <p>Você não está restrito aos dois atributos especiais, <code>class</code> e <code>id</code>. Você pode especificar outros atributos igualando entre colchetes. Por exemplo, o seletor <code>{{ mediawiki.external('type=button') }}</code> seleciona todos os elementos que tiverem um atributo <code>type</code> com o valor <code>button</code>.</p>

    <p>Uma página posterior deste tutorial (<a href="/pt/CSS/Como_come%C3%A7ar/Tabelas" title="pt/CSS/Como_começar/Tabelas">Tabelas</a>) tem informações sobre seletores complexos baseados em parentescos.</p>

    <p>Para um informação completa sobre seletores, veja <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> na CSS Specification.</p>
   </td>
  </tr>
 </tbody>
</table>

<p>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.</p>

<p>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.</p>

<h3 id="A.C3.A7.C3.A3o:_Usando_seletores_de_classe_e_id" name="A.C3.A7.C3.A3o:_Usando_seletores_de_classe_e_id">Ação: Usando seletores de classe e id</h3>

<p>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:</p>

<div style="width: 48em; color: gray;">
<pre class="eval">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;HTML&gt;
  &lt;HEAD&gt;
  &lt;TITLE&gt;Documento de amostra&lt;/TITLE&gt;
  &lt;LINK rel="stylesheet" type="text/css" href="style1.css"&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
    &lt;P <strong style="color: black;">id="first"</strong>&gt;
      &lt;STRONG <strong style="color: black;">class="carrot"</strong>&gt;C&lt;/STRONG&gt;ascading
      &lt;STRONG <strong style="color: black;">class="spinach"</strong>&gt;S&lt;/STRONG&gt;tyle
      &lt;STRONG <strong style="color: black;">class="spinach"</strong>&gt;S&lt;/STRONG&gt;heets
    &lt;/P&gt;
    <strong style="color: black;">&lt;P id="second"&gt;
      &lt;STRONG&gt;C&lt;/STRONG&gt;ascading
      &lt;STRONG&gt;S&lt;/STRONG&gt;tyle
      &lt;STRONG&gt;S&lt;/STRONG&gt;heets
    &lt;/P&gt;</strong>
  &lt;/BODY&gt;
&lt;/HTML&gt;
</pre>
</div>

<p>Agora edite seu arquivo CSS. Substitua os componentes inteiros com:</p>

<div style="width: 40em;">
<pre>strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
</pre>
</div>

<p><br>
 Atualize seu navegador para ver o resultado:</p>

<table style="border: 2px outset #36b; padding: 1em;">
 <tbody>
  <tr>
   <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
  </tr>
  <tr>
   <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
  </tr>
 </tbody>
</table>

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

<p>Os seletores de classe <code>.carrot</code> e <code>.spinach</code> tem prioridade sobre o seletor de tag <code>STRONG</code>.</p>

<p>O seletor id <code>#first</code> tem prioridade sobre a classe o os seletores de tag.</p>

<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
 <caption>Desafios</caption>
 <tbody>
  <tr>
   <td>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:
    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
     <tbody>
      <tr>
       <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
      </tr>
      <tr>
       <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
      </tr>
     </tbody>
    </table>

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

    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
     <tbody>
      <tr>
       <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
      </tr>
      <tr>
       <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>

<p>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 <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Seletores" title="Talk:pt/CSS/Como_começar/Seletores">Discussão</a>.</p>

<p>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: <strong><a href="/pt/CSS/Como_come%C3%A7ar/CSS_leg%C3%ADvel" title="pt/CSS/Como_começar/CSS_legível">CSS legível</a></strong></p>

<p>{{ PreviousNext("CSS:Como começar:Cascata e herança", "CSS:Como começar:CSS legível") }}</p>