path: root/files/pt-br/web/css/getting_started/seletores/index.html

---
title: Seletores
slug: Web/CSS/Getting_Started/Seletores
translation_of: Learn/CSS/Building_blocks/Selectors
---
<p>{{ CSSTutorialTOC() }}</p>

<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading &amp; inheritance")}}<span class="seoSummary">Esta é a 5ª seção de <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">Primeiros passos (Tutorial Css)</a>, ela explica como você pode aplicar estilos seletivamente e como diferentes tipos de seletores possuem diferentes prioridades. Você adiciona mais atributos para tags no seu documento e como você pode usa-los em sua folha de estilos.</span></p>

<h2 class="clearLeft" id="Informações_Seletores">Informações: Seletores</h2>

<p>CSS tem sua propria terminologia para descrever a linguagem CSS. Anteriormente nesse tutorial, você criou linha no seu stylesheet como esta:</p>

<pre class="brush: css">strong {
  color: red;
}
</pre>

<p>No CSS, este código inteiro é uma <em>regra</em>. Esta regra inicia com <code>strong</code>, que é um <em>seletor</em>. Ele seleciona os elementos do DOM aos quais a regra se aplica.</p>

<div class="tuto_details">
<div class="tuto_type">Mais detalhes</div>

<p>A parte dentro das chaves é a <em>declaração</em>.</p>

<p>A palavra-chave <code>color</code> é uma <em>propriedade e</em> <code>red</code> é um <em>valor</em>.</p>

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

<p>Esse tutorial se refere ao seletor <code>strong</code> como um seletor de <em>tag</em>. A Especificação do CSS se refere a este seletor como seletor de <em>tipo</em>.</p>
</div>

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

<p>Em adição aos nomes das tags, você pode usar valores de atributos nos seletores. Isso permite que as regras sejam mais específicas.</p>

<p>Dois atributos são especiais para o CSS. São eles o <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> e o <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p>

<h3 id="Seletores_com_Classe">Seletores com Classe</h3>

<p>Use o atributo <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> em um elemento para atribuir o elemento a uma determinada classe. O nome da classe é de sua escolha. Muitos elementos em um documento podem pertencer a mesma classe.</p>

<p>Em seu CSS, digite um ponto final antes do nome da classe para usar como um seletor.</p>

<h3 id="Seletores_com_ID">Seletores com ID</h3>

<p>Use o atributo <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a> em um elemento para atribuir um ID a esse elemento. O nome do ID é de sua escolha e ele deve ser único no documento.</p>

<p>Em seu CSS, digite cerquilha <strong>(#)</strong> antes do ID quanto estiver usando em um seletor ID.</p>

<div class="tuto_example">
<div class="tuto_type">Exemplo</div>
Esta tag HTML tem tanto um atributo <code>class</code> quanto um atributo <code>id</code>:

<pre class="brush: html">&lt;p class="chave" id="principal"&gt;
</pre>

<p>O valor de <strong>id</strong>, <code>principal</code>, precisa ser unico no documento, mas outras tags no documento podem ter o atributo <strong>class</strong> com o mesmo nome, <code>chave</code>.</p>

<p>Em uma folha de estilo CSS, esta regra torna verde todos os elementos da classe <code>chave</code>. (Eles podem ou não serem elementos {{ HTMLElement("p") }}.)</p>

<pre class="brush: css">.chave {
  color: green;
}
</pre>

<p>Esta regra torna negrito um elemento com <strong>id</strong> <code>principal</code>:</p>

<pre class="brush: css">#principal {
  font-weight: bolder;
}
</pre>
</div>

<h3 id="Seletores_de_Atributo">Seletores de Atributo</h3>

<p>Você não está restrito aos dois atributos especiais, class e id. Você pode especificar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors">outros atributos</a> usando colchetes. Dentro dos colchetes você insere o nome do atributo, opcionalmente seguido por um operador correspondente e um valor. Além disso, a seleção pode ser feita case-insensitive adicionando um "i" depois do valor, mas nem todos os browsers suportam esta funcionalidade ainda. Exemplos:</p>

<dl>
 <dt><code>[disabled]</code></dt>
 <dd>Seleciona todos os elementos com o atributo "disabled".</dd>
 <dt><code>[type='button']</code></dt>
 <dd>Seleciona todos os elementos do tipo "button".</dd>
 <dt><code>[class~=key]</code></dt>
 <dd><font><font>Seleciona elementos com a classe "key" (mas não ex: "keyed", "monkey", "buckeye"). </font><font>Funcionalmente equivalente a </font></font><code>.key</code><font><font>.</font></font></dd>
 <dt><code>[lang|=es]</code></dt>
 <dd>Selects elements specified as Spanish. This includes "es" and "es-MX" but not "eu-ES" (which is Basque).</dd>
 <dt>[title*="example" i]</dt>
 <dd><font>Seleciona elementos cujo título contém "exemplo", ignorando maiúsculas e minúsculas. </font><font>Nos navegadores que não suportam o sinalizador "i", esse seletor provavelmente não corresponderá a nenhum elemento.</font></dd>
 <dt><code>a[href^="https://"]</code></dt>
 <dd>Seleciona links seguros.</dd>
 <dt><code>img[src$=".png"]</code></dt>
 <dd>IIndiretamente seleciona imagens PNG; qualquer imagem que seja PNG mas que a URL não termine em ".png" (como quando elas são uma query string) não serão selecionadas.</dd>
</dl>

<h3 id="Seletores_de_pseudo-classes">Seletores de pseudo-classes</h3>

<p><font><font>Uma </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" title="pt-BR / docs / Web / Guide / CSS / Pseudo-classes"><font><font>pseudo-classe</font></font></a><font><font> em CSS </font><font>é uma palavra-chave adicionada aos seletores que especifica um estado especial do elemento a ser selecionado. </font><font>Por exemplo </font></font> {{ Cssxref(":hover") }}, aplicará um estilo quando o usuário passar o mouse sobre o elemento especificado pelo seletor.</p>

<p>Pseudo-classes, juntas com pseudo-elementos, te deixa aplicar um estilo para um elemento não apenas em relação ao conteúdo da árvore do documento, mas também em relação à fatores externos como o histórico do navegador ({{ cssxref(":visited") }}, por exemplo), o estado do conteúdo (como {{ cssxref(":checked") }} no mesmo elemento do formulário), ou a posição do mouse (como {{ cssxref(":hover") }} que te permite saber se o mouse está sobre um elemento ou não). Para ver uma lista completa de seletores, visite <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a>.</p>

<div class="tuto_example">
<div class="tuto_type">Syntax</div>

<pre class="brush:css">selector:pseudo-class {
  property: value;
}
</pre>
</div>

<h4 id="Lista_de_pseudo-classes">Lista de pseudo-classes</h4>

<ul>
 <li>{{ Cssxref(":link") }}</li>
 <li>{{ Cssxref(":visited") }}</li>
 <li>{{ Cssxref(":active") }}</li>
 <li>{{ Cssxref(":hover") }}</li>
 <li>{{ Cssxref(":focus") }}</li>
 <li>{{ Cssxref(":first-child") }}</li>
 <li>{{ Cssxref(":last-child") }}</li>
 <li>{{ Cssxref(":nth-child") }}</li>
 <li>{{ Cssxref(":nth-last-child") }}</li>
 <li>{{ Cssxref(":nth-of-type") }}</li>
 <li>{{ Cssxref(":first-of-type") }}</li>
 <li>{{ Cssxref(":last-of-type") }}</li>
 <li>{{ Cssxref(":empty") }}</li>
 <li>{{ Cssxref(":target") }}</li>
 <li>{{ Cssxref(":checked") }}</li>
 <li>{{ Cssxref(":enabled") }}</li>
 <li>{{ Cssxref(":disabled") }}</li>
</ul>

<h2 id="Informação_Especificidade">Informação: Especificidade</h2>

<p>Várias regras podem ter seletores que correspondem ao mesmo elemento. Se uma propriedade recebeu apenas uma regra, não há conflito e a propriedade será definida ao elemento. Se são aplicadas mais do que uma regra a um elemento e definido a mesma propriedade, então o CSS dará prioridade à regra que tem o seletor mais <a href="/en-US/docs/Web/CSS/Specificity">específico</a>. Um seletor ID é mais específico do que um seletor de classe, pseudo-classe ou atributo, que por sua vez é mais específico do que um de tag ou de pseudo-elemento.</p>

<div class="tuto_details">
<div class="tuto_type">Mais detalhes</div>

<p>Você também pode combinar seletores, fazendo um seletor mais específico. Por exemplo, o seletor <code>.key</code> seleciona todos os elementos que têm a classe com o nome <code>key</code>. O seletor <code>p.key</code> seleciona só os elementos {{ HTMLElement("p") }} nomeados com a classe <code>key</code>.</p>
</div>

<p>Se a folha de estilo possui regras conflitantes e elas são igualmente específicas, então o CSS dará prioridade à regra que é posterior na folha de estilo.</p>

<p>Quando você tem um problema com regras conflitantes, tente resolvê-los tornando uma das regras mais específicas, para que ela seja priorizada. Se você não pode fazer isto, tente mover uma das regras perto do fim da folha de estilo e então ela será priorizada.</p>

<h2 id="Information_Selectors_based_on_relationships">Information: Selectors based on relationships</h2>

<p>CSS has some ways to select elements based on the relationships between elements. You can use these to make selectors that are more specific.</p>

<table id="relselectors">
 <caption>Common selectors based on relationships</caption>
 <tbody>
  <tr>
   <td style="width: 10em;"><strong>Selector</strong></td>
   <td><strong>Selects</strong></td>
  </tr>
  <tr>
   <td><code>A E</code></td>
   <td>Any E element that is a <em>descendant</em> of an A element (that is: a child, or a child of a child, <em>etc</em>.)</td>
  </tr>
  <tr>
   <td><code>A &gt; E</code></td>
   <td>Any E element that is a <em>child</em> (i.e. direct descendant) of an A element</td>
  </tr>
  <tr>
   <td><code>E:first-child</code></td>
   <td>Any E element that is the <em>first child</em> of its parent</td>
  </tr>
  <tr>
   <td><code>B + E</code></td>
   <td>Any E element that is the next <em>sibling</em> of a B element (that is: the next child of the same parent)</td>
  </tr>
 </tbody>
</table>

<p>You can combine these to express complex relationships.</p>

<p>You can also use the symbol <code>*</code> (asterisk) to mean "any element".</p>

<div class="tuto_example">
<div class="tuto_type">Example</div>

<p>An HTML table has an <code>id</code> attribute, but its rows and cells do not have individual identifiers:</p>

<pre class="brush: html">&lt;table id="data-table-1"&gt;
...
&lt;tr&gt;
&lt;td&gt;Prefix&lt;/td&gt;
&lt;td&gt;0001&lt;/td&gt;
&lt;td&gt;default&lt;/td&gt;
&lt;/tr&gt;
...
</pre>

<p>These rules make the first cell in each row underline, and the sibling of first cell in each row strikethroughted (in example 2.nd cell) . They only affect one specific table in the document:</p>

<pre class="brush:css">    #data-table-1 td:first-child {text-decoration: underline;}
    #data-table-1 td:first-child + td {text-decoration: line-through;}
</pre>

<p>The result looks like:</p>

<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
 <tbody>
  <tr>
   <td>
    <table style="margin-right: 2em; width: 18em;">
     <tbody>
      <tr>
       <td><u>Prefix</u></td>
       <td><s>0001</s></td>
       <td>default</td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>
</div>

<div class="tuto_details">
<div class="tuto_type">More details</div>

<p>In the usual way, if you make a selector more specific, then you increase its priority.</p>

<p>If you use these techniques, you avoid the need to specify <code>class</code> or <code>id</code> attributes on so many tags in your document. Instead, CSS does the work.</p>

<p>In large designs where speed is important, you can make your stylesheets more efficient by avoiding complex rules that depend on relationships between elements.</p>

<p>For more examples about tables, see <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a> in the CSS Reference page.</p>
</div>

<h2 id="Action_Using_class_and_ID_selectors">Action: Using class and ID selectors</h2>

<ol>
 <li>Edit your HTML file, and duplicate the paragraph by copying and pasting it.</li>
 <li>Then add <strong>id</strong> and <strong>class</strong> attributes to the first copy, and an <strong>id</strong> attribute to the second copy as shown below. Alternatively, copy and paste the entire file again:
  <pre class="brush: html">&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Sample document&lt;/title&gt;
  &lt;link rel="stylesheet" href="style1.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p id="first"&gt;
      &lt;strong class="carrot"&gt;C&lt;/strong&gt;ascading
      &lt;strong class="spinach"&gt;S&lt;/strong&gt;tyle
      &lt;strong class="spinach"&gt;S&lt;/strong&gt;heets
    &lt;/p&gt;
    &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;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
 </li>
 <li>Now edit your CSS file. Replace the entire contents with:
  <pre class="brush:css">strong { color: red; }
.carrot { color: orange; }
.spinach { color: green; }
#first { font-style: italic; }
</pre>
 </li>
 <li>Save the files and refresh your browser to see the result:
  <table style="border: 2px outset #3366bb; 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>You can try rearranging the lines in your CSS file to show that the order has no effect.</p>

  <p>The class selectors <code>.carrot</code> and <code>.spinach</code> have priority over the tag selector <code>strong</code>.</p>

  <p>The ID selector <code>#first</code> has priority over the class and tag selectors.</p>
 </li>
</ol>

<div class="tuto_example">
<div class="tuto_type">Challenges</div>

<ol>
 <li>Without changing your HTML file, add a single rule to your CSS file that keeps all the initial letters that same color as they are now, but makes all the other text in the second paragraph blue:
  <table style="background-color: white; border: 2px outset #3366bb; 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 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>
 </li>
 <li>Now change the rule you have just added (without changing anything else), to make the first paragraph blue too:
  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
   <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>
 </li>
</ol>

<div class="tuto_details" id="tutochallenge">
<div class="tuto_type">Possible solution</div>

<ol>
 <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below:

  <pre class="brush: css">#second { color: blue; }
</pre>
  A more specific selector, <code>p#second</code> also works.</li>
 <li>Change the selector of the new rule to be a tag selector using <code>p</code>:
  <pre class="brush: css">p { color: blue; }
</pre>
 </li>
</ol>
<a class="hideAnswer" href="#challenge">Hide solution</a></div>
<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>

<h2 id="Action_Using_pseudo-classes_selectors">Action: Using pseudo-classes selectors</h2>

<ol>
 <li>Create an HTML file with following content:
  <pre class="brush: html">&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Sample document&lt;/title&gt;
  &lt;link rel="stylesheet" href="style1.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;Go to our &lt;a class="homepage" href="http://www.example.com/" title="Home page"&gt;Home page&lt;/a&gt;.&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
 </li>
 <li>Now edit your CSS file. Replace the entire contents with:
  <pre class="brush: css">a.homepage:link, a.homepage:visited {
  padding: 1px 10px 1px 10px;
  color: #fff;
  background: #555;
  border-radius: 3px;
  border: 1px outset rgba(50,50,50,.5);
  font-family: georgia, serif;
  font-size: 14px;
  font-style: italic;
  text-decoration: none;
}

a.homepage:hover, a.homepage:focus, a.homepage:active {
  background-color: #666;
}
</pre>
 </li>
 <li>Save the files and refresh your browser to see the result (put the mouse over the following link to see the effect):
  <table style="border: 2px outset #3366bb; padding: 1em;">
   <tbody>
    <tr>
     <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td>
    </tr>
   </tbody>
  </table>
 </li>
</ol>

<h2 id="Action_Using_selectors_based_on_relationships_and_pseudo-classes">Action: Using selectors based on relationships and pseudo-classes</h2>

<p>With selectors based on relationships and pseudo-classes you can create complex cascade algorithms. This is a common technique used, for example, in order to create <strong>pure-CSS dropdown menus</strong> (that is only CSS, without using <a href="/en-US/docs/Web/JavaScript" title="en-US/docs/Web/JavaScript">JavaScript</a>). The essence of this technique is the creation of a rule like the following:</p>

<pre class="brush: css">div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover &gt; ul {
  display: block;
}</pre>

<p>to be applied to an HTML structure like the following:</p>

<pre class="brush: html">&lt;div class="menu-bar"&gt;
  &lt;ul&gt;
    &lt;li&gt;
      &lt;a href="example.html"&gt;Menu&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;a href="example.html"&gt;Link&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</pre>

<p>See our complete <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a> for a possible cue.</p>

<h2 id="What_next">What next?</h2>

<p>Your sample stylesheet is starting to look dense and complicated. The next section describes ways to make CSS <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">easier to read</a>.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p>