Seletores CSS
=============

Os Seletores definem quais elementos um conjunto de regras CSS se aplica.

Seletores Básicos
-----------------

Seletor por tag

 Este seletor básico escolhe todos os elementos que correspondem ao nome fornecido.
 **Sintaxe:** `nome-da-tag`
**Exemplo:** `input` corresponderá a qualquer elemento `<input>`.


Seletor por classe

 Este seletor básico escolhe elementos baseados no valor de seu atributo `classe`. **Sintaxe:** `.nome-da-classe`
**Exemplo:** `.index` irá corresponder a qualquer elemento que tenha o índice de classe (provavelmente definido por um atributo class="index", ou similar).


Seletor por ID

 Este seletor básico escolhe nós baseados no valor do atributo `id`. Deve existir apenas um elemento com o mesmo ID no mesmo documento.
 **Sintaxe:** `#nome-do-id`
**Exemplo:** `#toc` irá corresponder ao elemento que possuir o id=toc (definido por um atributo id="toc", ou similar).


Seletores universais

 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.
 **Sintaxe:** `* ns|* *|*`
**Exemplo:** `*` irá corresponder a todos os elementos do documento.


Seletores por atributo

 Este seletor básico ira escolher nós baseados no valor de um de seus atributos, ou até mesmo pelo próprio atributo.
 **Sintaxe:** `[atrib] [atrib=valor] [atrib~=valor] [atrib|=valor] [atrib^=valor] [atrib$=valor] [atrib*=valor]`
**Exemplo:** `[autoplay]` irá corresponder a todos os elementos que possuirem o atributo `autoplay` (para qualquer valor).


Combinadores
------------

Seletores de irmãos adjacentes (en-US)

 O combinador `+` seleciona os nós que seguem imediatamente o elemento especificado anteriormente.
 **Sintaxe:** `A + B`
**Exemplo:** `ul + li` irá corresponder a qualquer elemento `<li>` que segue imediatamente após um elemento `<ul>`.


Seletores gerais de irmãos

 O combinador `~` seleciona os nós que seguem (não necessariamente imediatamente) o elemento especificado anteriormente, se ambos os elementos compartilham o mesmo pai.
 **Sintaxe:** `A ~ B`
**Exemplo:** `p ~ span` irá corresponder a todo elemento `<span>` que seguir um elemento `<p>` dentro de um mesmo elemento pai.


Seletor de filhos (en-US)

 O combinador `>` seleciona nós que são filhos diretos do elemento especificado anteriormente.
 **Sintaxe:** `A > B`
**Exemplo:** `ul > li` irá corresponder a todo elemento `<li>` que estiver diretamente dentro de um elemento `<ul>` especificado.


Seletor de descendentes (en-US)

O combinador " " seleciona os nós que são filhos do elemento especificado anteriormente (não é necessário que seja um filho direto). **Sintaxe:** `A B`**Exemplo:**`div span` irá corresponder a todo e qualquer elemento `<span>` que estiver dentro do elemento `<div>`.

Pseudo-classes
--------------

Pseudo-classes 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.

Pseudo-elementos
----------------

Pseudo-elementos 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.

Especificações
--------------

| Specification |
| --- |
| Selectors Level 4  |