Carregando...
Referência Completa de Seletores CSS
Este guia completo de seletores CSS foi desenvolvido para fornecer aos desenvolvedores uma referência rápida e confiável de todos os tipos de seletores disponíveis no CSS moderno. Ele cobre seletores básicos, combinadores, atributos, pseudo-classes estruturais, de interação e de formulário, pseudo-elementos, seletores avançados e consultas de mídia. Com exemplos práticos e suporte detalhado de navegador, este guia auxilia no desenvolvimento eficiente de folhas de estilo, prevenindo conflitos de estilo, otimizando código e garantindo compatibilidade em múltiplos ambientes. É ideal para consulta rápida durante o desenvolvimento, planejamento de layouts complexos e implementação de interfaces modernas e responsivas.
📊 Basic Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| * | * | Seletor universal - seleciona todos os elementos | * { margin: 0; } | Todos os navegadores |
| element | tagname | Seletor de tipo - seleciona todos os elementos do tipo especificado | p { color: blue; } | Todos os navegadores |
| .class | .classname | Seletor de classe - seleciona elementos com a classe especificada | .highlight { background: yellow; } | Todos os navegadores |
| \#id | #idname | Seletor de ID - seleciona elemento com o ID especificado | #header { width: 100%; } | Todos os navegadores |
📊 Combinator Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| descendant | A B | Seleciona elementos B que estão dentro de A | div p { margin: 10px; } | Todos os navegadores |
| child | A > B | Seleciona elementos B que são filhos diretos de A | ul > li { list-style: none; } | IE7+ |
| adjacent sibling | A + B | Seleciona elemento B imediatamente após A | h1 + p { font-weight: bold; } | IE7+ |
| general sibling | A \~ B | Seleciona todos os elementos B irmãos de A que aparecem depois de A | h1 \~ p { color: gray; } | IE7+ |
📊 Attribute Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| \[attribute] | \[attr] | Seleciona elementos com o atributo especificado | \[disabled] { opacity: 0.5; } | IE7+ |
| \[attribute=value] | \[attr=val] | Seleciona elementos cujo atributo é igual a valor | \[type="text"] { border: 1px solid; } | IE7+ |
| \[attribute\~=value] | \[attr\~=val] | Seleciona elementos cujo atributo contém palavra específica | \[class\~="button"] { cursor: pointer; } | IE7+ |
| \[attribute^=value] | \[attr^=val] | Seleciona elementos cujo atributo inicia com valor | \[href^="https"] { color: green; } | IE7+ |
| \[attribute\$=value] | \[attr\$=val] | Seleciona elementos cujo atributo termina com valor | \[src\$=".jpg"] { border: 2px solid; } | IE7+ |
| \[attribute*=value] | \[attr*=val] | Seleciona elementos cujo atributo contém valor em qualquer posição | \[title*="important"] { font-weight: bold; } | IE7+ |
| \[attribute="value" i] | \[attr="val" i] | Seleciona elementos ignorando maiúsculas/minúsculas | \[type="EMAIL" i] { text-transform: lowercase; } | Navegadores modernos |
📊 Pseudo-class Selectors - Structural
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :first-child | :first-child | Seleciona o primeiro filho | p:first-child { margin-top: 0; } | IE7+ |
| :last-child | :last-child | Seleciona o último filho | p:last-child { margin-bottom: 0; } | IE9+ |
| :nth-child(n) | :nth-child(n) | Seleciona o n-ésimo filho | tr:nth-child(2n) { background: #f0f0f0; } | IE9+ |
| :nth-last-child(n) | :nth-last-child(n) | Seleciona o n-ésimo filho a partir do final | li:nth-last-child(2) { color: red; } | IE9+ |
| :nth-of-type(n) | :nth-of-type(n) | Seleciona o n-ésimo elemento do mesmo tipo | h2:nth-of-type(odd) { color: blue; } | IE9+ |
| :nth-last-of-type(n) | :nth-last-of-type(n) | Seleciona o n-ésimo elemento do tipo a partir do final | p:nth-last-of-type(1) { font-weight: bold; } | IE9+ |
| :first-of-type | :first-of-type | Seleciona o primeiro elemento do tipo | img:first-of-type { float: left; } | IE9+ |
| :last-of-type | :last-of-type | Seleciona o último elemento do tipo | p:last-of-type { margin-bottom: 20px; } | IE9+ |
| :only-child | :only-child | Seleciona elementos que são filhos únicos | p:only-child { text-align: center; } | IE9+ |
| :only-of-type | :only-of-type | Seleciona elementos únicos do tipo | img:only-of-type { display: block; } | IE9+ |
| :empty | :empty | Seleciona elementos sem filhos | div:empty { display: none; } | IE9+ |
📊 Pseudo-class Selectors - User Action
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :hover | :hover | Seleciona elementos ao passar o mouse | a:hover { color: red; } | Todos os navegadores |
| :active | :active | Seleciona elementos clicados | button:active { transform: scale(0.95); } | Todos os navegadores |
| :focus | :focus | Seleciona elementos com foco de teclado | input:focus { outline: 2px solid blue; } | Todos os navegadores |
| :focus-visible | :focus-visible | Seleciona elementos com foco visível | button:focus-visible { outline: 2px solid; } | Navegadores modernos |
| :focus-within | :focus-within | Seleciona elemento que contém elemento com foco | form:focus-within { border: 1px solid blue; } | Navegadores modernos |
📊 Pseudo-class Selectors - Form States
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :enabled | :enabled | Seleciona elementos de formulário habilitados | input:enabled { background: white; } | IE9+ |
| :disabled | :disabled | Seleciona elementos de formulário desabilitados | input:disabled { background: #f5f5f5; } | IE9+ |
| :checked | :checked | Seleciona checkboxes/radios marcados | input:checked + label { font-weight: bold; } | IE9+ |
| :indeterminate | :indeterminate | Seleciona checkboxes indefinidos | input:indeterminate { opacity: 0.5; } | IE9+ |
| :valid | :valid | Seleciona elementos válidos | input:valid { border-color: green; } | IE10+ |
| :invalid | :invalid | Seleciona elementos inválidos | input:invalid { border-color: red; } | IE10+ |
| :required | :required | Seleciona campos obrigatórios | input:required { border-left: 3px solid red; } | IE10+ |
| :optional | :optional | Seleciona campos opcionais | input:optional { border-left: 3px solid gray; } | IE10+ |
| :read-only | :read-only | Seleciona elementos somente leitura | input:read-only { background: #f9f9f9; } | Navegadores modernos |
| :read-write | :read-write | Seleciona elementos editáveis | input:read-write { background: white; } | Navegadores modernos |
| :placeholder-shown | :placeholder-shown | Seleciona elementos mostrando placeholder | input:placeholder-shown { font-style: italic; } | Navegadores modernos |
| :in-range | :in-range | Seleciona elementos com valor dentro do intervalo | input:in-range { border-color: green; } | Navegadores modernos |
| :out-of-range | :out-of-range | Seleciona elementos com valor fora do intervalo | input:out-of-range { border-color: red; } | Navegadores modernos |
📊 Pseudo-class Selectors - Link States
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :link | :link | Seleciona links não visitados | a:link { color: blue; } | Todos os navegadores |
| :visited | :visited | Seleciona links visitados | a:visited { color: purple; } | Todos os navegadores |
| :any-link | :any-link | Seleciona todos os links | a:any-link { text-decoration: underline; } | Navegadores modernos |
| :target | :target | Seleciona elemento alvo do URL atual | :target { background: yellow; } | IE9+ |
📊 Pseudo-class Selectors - Logical
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :not(selector) | :not(sel) | Seleciona elementos que não correspondem ao seletor | p:not(.special) { color: gray; } | IE9+ |
| :is(selector) | :is(sel1, sel2) | Seleciona elementos que correspondem a qualquer seletor | :is(h1, h2, h3) { margin-top: 0; } | Navegadores modernos |
| :where(selector) | :where(sel1, sel2) | Como :is mas com especificidade zero | :where(h1, h2) { color: blue; } | Navegadores modernos |
| :has(selector) | :has(sel) | Seleciona elementos que contêm outro seletor | div:has(img) { border: 1px solid; } | Navegadores modernos |
📊 Pseudo-element Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| ::before | ::before | Insere conteúdo antes do elemento | p::before { content: "→ "; } | IE9+ (só :before IE8+) |
| ::after | ::after | Insere conteúdo depois do elemento | p::after { content: " ←"; } | IE9+ (só :after IE8+) |
| ::first-line | ::first-line | Seleciona a primeira linha do texto | p::first-line { font-weight: bold; } | IE9+ (só :first-line IE6+) |
| ::first-letter | ::first-letter | Seleciona a primeira letra do texto | p::first-letter { font-size: 2em; } | IE9+ (só :first-letter IE6+) |
| ::selection | ::selection | Seleciona texto selecionado pelo usuário | ::selection { background: yellow; } | IE9+ |
| ::placeholder | ::placeholder | Seleciona texto de placeholder | input::placeholder { color: #999; } | Navegadores modernos |
| ::backdrop | ::backdrop | Seleciona plano de fundo de elemento em fullscreen | dialog::backdrop { background: rgba(0,0,0,0.5); } | Navegadores modernos |
| ::marker | ::marker | Seleciona marcadores de lista | li::marker { color: red; } | Navegadores modernos |
📊 Advanced Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :root | :root | Seleciona elemento raiz do documento | :root { --main-color: blue; } | IE9+ |
| :scope | :scope | Seleciona elemento de escopo | :scope > p { margin: 0; } | Navegadores modernos |
| :defined | :defined | Seleciona elementos customizados definidos | custom-element:defined { opacity: 1; } | Navegadores modernos |
| :host | :host | Seleciona host de shadow DOM | :host { display: block; } | Navegadores modernos |
| :host(selector) | :host(sel) | Seleciona host que corresponde ao seletor | :host(.active) { color: red; } | Navegadores modernos |
| :host-context(selector) | :host-context(sel) | Seleciona host em contexto específico | :host-context(.dark) { color: white; } | Navegadores modernos |
| ::slotted(selector) | ::slotted(sel) | Seleciona conteúdo dentro de slot | ::slotted(p) { margin: 0; } | Navegadores modernos |
📊 Media Query Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| @media | @media (condition) | Aplica estilos com base em condições de mídia | @media (max-width: 768px) { .nav { display: none; } } | IE9+ |
| @supports | @supports (property: value) | Aplica estilos se navegador suporta recurso | @supports (display: grid) { .layout { display: grid; } } | Navegadores modernos |
| @container | @container (condition) | Aplica estilos com base no tamanho do container | @container (min-width: 400px) { .card { flex-direction: row; } } | Navegadores modernos |
Quick Examples
css
CSS Code
/* Combinação de seletores básicos */
.header nav ul li a:hover {
color: #007bff;
text-decoration: none;
}
/* Seletores de atributo para formulários */
input\[type="email"]:focus:valid {
border-color: green;
box-shadow: 0 0 5px rgba(0,255,0,0.3);
}
/* Pseudo-elementos para estilização avançada */
.quote::before {
content: "“";
font-size: 2em;
color: #999;
}
/* Seletores estruturais avançados */
.grid-item:nth-child(3n+1) {
margin-left: 0;
}
/* Seletores lógicos modernos */
:is(h1, h2, h3):not(.no-margin) {
margin-top: 2rem;
}Melhores práticas e dicas:
- Utilize seletores específicos para evitar conflitos de estilo indesejados.
- Prefira seletores de classe em vez de ID para maior reutilização.
- Combine seletores de forma eficiente para reduzir o tamanho do CSS.
- Teste pseudo-classes em diferentes navegadores.
- Use :not() com cautela, pois pode impactar desempenho.
- Lembre-se que pseudo-elementos criam elementos virtuais no DOM.
- Considere a especificidade ao usar combinações complexas de seletores.
- Use seletores de atributo para estilização dinâmica de formulários.
- Teste seletores modernos como :has() e :is() quanto ao suporte de navegador.
- Agrupe seletores relacionados para melhor organização de código.
- Utilize seletores descendentes com parcimônia para evitar excesso de aninhamento.
- Alguns pseudo-classes funcionam apenas com determinados elementos.
🧠 Teste Seu Conhecimento
Pronto para Começar
Reference Knowledge Check
Teste seu conhecimento sobre seletores CSS e seu uso.
3
Perguntas
70%
Para Passar
∞
Tempo
∞
Tentativas
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo