---
title: Seletores CSS
slug: Web/CSS/CSS_Selectors
tags:
  - CSS
  - Referência(2)
  - Seletores
  - Seletores CSS
translation_of: Web/CSS/CSS_Selectors
original_slug: Web/CSS/Seletores_CSS
---
<div>{{CSSRef}}</div>

<p>Os Seletores definem quais elementos um conjunto de regras CSS se aplica.</p>

<h2 id="Seletores_Básicos">Seletores Básicos</h2>

<dl>
 <dt><a href="/en-US/docs/Web/CSS/Type_selectors">Seletor por tag</a></dt>
 <dd>Este seletor básico escolhe todos os elementos que correspondem ao nome fornecido.<br>
 <strong>Sintaxe:</strong> <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><em>nome-da-tag</em></span></font><br>
 <strong>Exemplo:</strong> <code>input</code> corresponderá a qualquer elemento {{HTMLElement('input')}}.</dd>
 <dt><a href="/en-US/docs/Web/CSS/Class_selectors">Seletor por classe</a></dt>
 <dd>Este seletor básico escolhe elementos baseados no valor de seu atributo <code>classe</code>.<strong> Sintaxe:</strong> <code>.<em>nome-da-classe</em></code><br>
 <strong>Examplo:</strong> <code>.index</code> irá corresponder a qualquer elemento que tenha o índice de classe (provavelmente definido por um atributo class="index", ou similar).</dd>
 <dt><a href="/en-US/docs/Web/CSS/ID_selectors">Seletor por ID</a></dt>
 <dd>Este seletor básico escolhe nós baseados no valor do atributo <code>id</code>. Deve existir apenas um elemento com o mesmo ID no mesmo documento.<br>
 <strong>Sintaxe:</strong> <code>#<em>nome-do-id</em></code><br>
 <strong>Exemplo:</strong> <code>#toc</code> irá corresponder ao elemento que possuir o id=toc (definido por um atributo id="toc", ou similar).</dd>
 <dt><a href="/en-US/docs/Web/CSS/Universal_selectors">Seletores universais</a></dt>
 <dd>Este seletor básico irá escolher todos os nós. Ele também existe em um namespace único e em uma variante de todo o namespace também.<br>
 <strong>Sintaxe:</strong> <code>* ns|* *|*</code><br>
 <strong>Exemplo:</strong> <code>*</code> irá corresponder a todos os elementos do documento.</dd>
 <dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Seletores por atributo</a></dt>
 <dd>Este seletor básico ira escolher nós baseados no valor de um de seus atributos, ou até mesmo pelo próprio atributo.<br>
 <strong>Sintaxe:</strong> <code>[atrib] [atrib=valor] [atrib~=valor] [atrib|=valor] [atrib^=valor] [atrib$=valor] [atrib*=valor]</code><br>
 <strong>Exemplo:</strong> <code>[autoplay]</code> irá corresponder a todos os elementos que possuirem o atributo <code>autoplay</code> (para qualquer valor).</dd>
</dl>

<h2 id="Combinadores">Combinadores</h2>

<dl>
 <dt><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Seletores de irmãos adjacentes</a></dt>
 <dd>O combinador <code>+</code> seleciona os nós que seguem imediatamente o elemento especificado anteriormente.<br>
 <strong>Sintaxe:</strong> <code><var>A</var> + <var>B</var></code><br>
 <strong>Exemplo:</strong> <code>ul + li</code> irá corresponder a qualquer elemento {{HTMLElement('li')}} que segue imediatamente após um elemento {{HTMLElement('ul')}}.</dd>
 <dt><a href="/en-US/docs/Web/CSS/General_sibling_selectors">Seletores gerais de irmãos</a></dt>
 <dd>O combinador <code>~</code> seleciona os nós que seguem (não necessariamente imediatamente) o elemento especificado anteriormente, se ambos os elementos compartilham o mesmo pai.<br>
 <strong>Sintaxe:</strong> <code><var>A</var> ~ <var>B</var></code><br>
 <strong>Exemplo:</strong> <code>p ~ span</code> irá corresponder a todo elemento {{HTMLElement('span')}} que seguir um elemento {{HTMLElement('p')}} dentro de um mesmo elemento pai.</dd>
 <dt><a href="/en-US/docs/Web/CSS/Child_selectors">Seletor de filhos</a></dt>
 <dd>O combinador <code>&gt;</code> selecina nós que são filhos diretos do elemento especificado anteriormente.<br>
 <strong>Sintaxe:</strong> <code><var>A</var> &gt; <var>B</var></code><br>
 <strong>Exemplo:</strong> <code>ul &gt; li</code> irá corresponder a todo elemento {{HTMLElement('li')}} que estiver diretamente dentro de um elemento {{HTMLElement('ul')}} especificado.</dd>
 <dt><a href="/en-US/docs/Web/CSS/Descendant_selectors">Seletor de descendentes</a></dt>
 <dd>O combinador <code> </code> seleciona os nós que são filhos do elemento especificado anteriormente (não é necessário que seja um filho direto).<br>
 <strong>Sintaxe:</strong> <code>A B</code><br>
 <strong>Exemplo:</strong> <code>div span</code> irá corresponder a todo e qualquer elemento {{HTMLElement('span')}} que estiver dentro do elemento {{HTMLElement('div')}}.</dd>
</dl>

<h2 id="Pseudo-classes">Pseudo-classes</h2>

<p><a href="/pt-BR/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a> permitem selecionar elementos baseados em informações que não estão contidas na árvore de documentos como um estado ou que é particularmente complexa de extrair. Por exemplo, eles correspondem se um link foi visitado anteriormente ou não.</p>

<h2 id="Pseudo-elementos">Pseudo-elementos</h2>

<p><a href="/pt-BR/docs/Web/CSS/Pseudo-elementos">Pseudo-elementos</a> são asbtrações da árvore que representam entidades além do que o HTML faz. Por exemplo, o HTML não tem um elemento que descreva a primeira letra ou linha de um parágrafo, ou o marcador de uma lista. Os pseudo-elementos representam essas entidades e permitem que as regras CSS sejam associadas a elas. Desta forma, essas entidades podem ser denominadas independentemente.</p>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Selectors')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'selector.html')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Definição inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>1</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>3.0</td>
   <td>3.5</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>1.5</td>
   <td>{{CompatGeckoMobile("1.9.2")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>3.2</td>
  </tr>
 </tbody>
</table>
</div>