3.8 KiB
title | localeTitle |
---|---|
CSS Selectors Cheat Sheet | CSS Cheats Sheet de Seletores |
Seletores de CSS
Em CSS, os seletores são padrões usados para selecionar elementos DOM.
Aqui está um exemplo de uso de seletores. No código a seguir, a
e h1
são seletores:
a {
color: black;
}
h1 {
font-size 24px;
}
Cheat list de seletores
| Seletor | Seleciona |
| --- | --- | | head
| seleciona o elemento com a tag head
|
| .red
| seleciona todos os elementos com a classe 'red' |
| #nav
| seleciona os elementos com o ID 'nav' |
| div.row
| seleciona todos os elementos com a tag div
e a classe 'row' | | [aria-hidden="true"]
| seleciona todos os elementos com o atributo aria-hidden
com um valor "true" | | *
| Seletor de caractere curinga. Seleciona todos os elementos DOM. Veja abaixo para usá-lo com outros seletores |
Podemos combinar seletores de maneiras interessantes. Alguns exemplos:
| Seletores | Seleciona |
| --- | --- | | li a
| Combinador descendente de DOM. Todos a
tags que são uma criança de li
etiquetas |
| div.row *
| seleciona todos os elementos que são descendentes (ou filho) dos elementos com tag div
e classe 'row' |
| li > a
| Combinador de diferença. Selecione descendentes diretos, em vez de todos os descendentes, como os seletores descendentes |
| li + a
| O combinador adjacente. Seleciona o elemento que é imediatamente precedido pelo elemento anterior. Neste caso, apenas o primeiro a
depois de cada li
. |
| li, a
| Seleciona todos a
elementos e todas as li
elementos. |
| li ~ a
| O combinador irmão. Seleciona a
elemento após um elemento li
. |
Pseudo-seletores ou pseudo classes estruturais também são úteis para selecionar elementos estruturais do DOM. Aqui estão alguns deles:
| Seletores | Seleciona | | --- | --- |
| :first-child
| Direcione o primeiro elemento imediatamente para dentro (ou filho de) outro elemento |
| :last-child
| Direcione o último elemento imediatamente para dentro (ou filho de) outro elemento |
| :nth-child()
| Direcione o enésimo elemento imediatamente para dentro (ou filho de) outro elemento. Admite inteiros, even
, odd
ou fórmulas |
| a:not(.name)
| Seleciona todos a
elementos que não são do .name
classe |
| ::after
| Permite inserir conteúdo em uma página de CSS, em vez de HTML. Enquanto o resultado final não está realmente no DOM, aparece na página como se fosse. Este conteúdo é carregado depois dos elementos HTML. |
| ::before
| Permite inserir conteúdo em uma página de CSS, em vez de HTML. Enquanto o resultado final não está realmente no DOM, aparece na página como se fosse. Este conteúdo é carregado antes dos elementos HTML. |
Podemos usar pseudo-classes para definir um estado especial de um elemento do DOM, mas não apontar para um elemento por si só. Alguns exemplos:
| Pseudoclasse | Seleciona | | --- | --- | | :hover
| seleciona um elemento que está sendo pairado por um ponteiro de mouse |
| :focus
| seleciona um elemento que recebe foco do teclado ou programaticamente | | :active
| seleciona um elemento que está sendo clicado por um ponteiro de mouse |
| :link
| seleciona todos os links que ainda não foram clicados |
| :visited
| seleciona um link que já foi clicado |
Jogos
CSS Diner é um jogo online que ensina quase tudo o que há para saber sobre a combinação de seletores.
Referência adicional
Existem muitos outros seletores CSS! Aprenda sobre eles em CodeTuts , CSS-tricks.com , w3schools.com ou na Mozilla Developer Network .