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 atributoautoplay
(para qualquer valor).
Combinadores
- Seletores de irmãos adjacentes
-
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
-
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
-
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 |