Guia de Seletores CSS

Guia de Seletores CSS – J. L. Gregório

Referência Completa · Front-end

Guia de
Seletores CSS

Desenvolvido por J. L. Gregório

Todo seletor que existe, organizado por categoria — cada um com explicação, código e um exemplo renderizado ao vivo para você ver o efeito acontecendo.

Seletores Simples

A base de tudo: selecionam elementos por tag, por classe, por ID, por todos de uma vez, ou vários ao mesmo tempo.

elemento tag

Seleciona todas as ocorrências de uma tag HTML.

HTML

<p>Sou um parágrafo</p>
<h4>Sou um título</h4>

CSS

p  { color: tomato; font-weight: 600; }
h4 { color: teal; }

Resultado

Sou um parágrafo

Sou um título

.classe classe

Seleciona elementos com determinada classe. Reutilizável em vários elementos.

HTML

<span class="destaque">Em destaque</span>
<p class="aviso">Mensagem de aviso</p>

CSS

.destaque { background: goldenrod; }
.aviso    { border-left: 4px solid red; }

Resultado

Em destaque

Mensagem de aviso

#id id

Seleciona o elemento com aquele ID. Deve ser único na página.

HTML

<p id="principal">Conteúdo principal</p>
<p id="rodape">Texto do rodapé</p>

CSS

#principal { font-size: 1.3rem; }
#rodape    { font-style: italic; }

Resultado

Conteúdo principal

Texto do rodapé

* universal

Seleciona absolutamente todos os elementos.

HTML

<div>
  <p>Tudo vira mono</p>
  <span>Inclusive isto</span>
</div>

CSS

* {
  font-family: monospace;
  letter-spacing: .04em;
}

Resultado

Tudo vira mono

Inclusive isto

A, B, C agrupamento

Aplica o mesmo estilo a vários seletores de uma só vez (separados por vírgula).

HTML

<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>

CSS

h4, h5, h6 {
  color: tomato;
  text-transform: uppercase;
}

Resultado

Título 4

Título 5

Título 6

Combinadores

Descrevem a relação de parentesco entre os elementos: descendente, filho direto, irmão imediato e irmãos gerais.

A B descendente

Seleciona B que esteja dentro de A, em qualquer nível de profundidade.

HTML

<article>
  <p>Texto com <span>destaque</span></p>
</article>
<span>Fora — sem efeito</span>

CSS

article span {
  background: teal;
  color: white;
}

Resultado

Texto com destaque

Fora — sem efeito

A > B filho direto

Seleciona B apenas se for filho imediato de A (um nível abaixo).

HTML

<ul class="menu">
  <li>Filho direto</li>
  <li>Outro
    <ul><li>Neto</li></ul>
  </li>
</ul>

CSS

.menu > li {
  color: tomato;
  font-weight: 700;
}

Resultado

A + B irmão adjacente

Seleciona o B que vem imediatamente após A, no mesmo nível.

HTML

<h4>Título</h4>
<p>Logo após — afetado</p>
<p>Segundo — sem efeito</p>

CSS

h4 + p {
  color: goldenrod;
  font-style: italic;
}

Resultado

Título

Logo após — afetado

Segundo — sem efeito

A ~ B irmãos gerais

Seleciona todos os B que vêm depois de A, no mesmo nível.

HTML

<h4>Título</h4>
<p>Irmão 1</p>
<p>Irmão 2</p>

CSS

h4 ~ p {
  border-bottom: 2px dotted olive;
}

Resultado

Título

Irmão 1

Irmão 2

Pseudo-classes

Selecionam elementos em um determinado estado ou posição: ao passar o mouse, ao focar, o primeiro filho, os pares, os marcados, etc. Começam com dois-pontos :

:hover estado

Ativa quando o mouse passa por cima. Passe o mouse no botão →

HTML

<button>Passe aqui</button>

CSS

button:hover {
  background: tomato;
  transform: scale(1.06);
}

Resultado

:focus estado

Ativa quando o elemento recebe foco. Clique no campo →

HTML

<input placeholder="Clique aqui">

CSS

input:focus {
  border-color: teal;
  box-shadow: 0 0 0 3px #2f6b6633;
}

Resultado

:first-child · :last-child · :nth-child() posição

Selecionam pela posição entre os irmãos. nth-child(even) pega os pares.

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

CSS

li:first-child     { background: olive; }
li:last-child      { background: tomato; }
li:nth-child(even) { background: #efe7d6; }

Resultado

Item 1
Item 2
Item 3
Item 4

:not() negação

Seleciona tudo que não corresponde ao seletor de dentro dos parênteses.

HTML

<li class="lido">Lida</li>
<li>Não lida</li>
<li>Não lida</li>

CSS

li:not(.lido) {
  color: tomato;
  font-weight: 700;
}

Resultado

Lida
Não lida
Não lida

:checked estado

Ativa em checkboxes / radios marcados. Marque a caixa →

HTML

<label>
  <input type="checkbox">
  <span>Tarefa concluída</span>
</label>

CSS

input:checked + span {
  color: teal;
  text-decoration: line-through;
}

Resultado Tarefa concluída

Pseudo-elementos

Estilizam uma parte específica do elemento — a primeira letra, a primeira linha, o texto selecionado, ou criam conteúdo antes/depois. Usam dois-pontos duplos ::

::before · ::after conteúdo gerado

Inserem conteúdo decorativo antes ou depois do elemento, via propriedade content.

HTML

<p class="nota">Observação</p>
<p class="preco">49,90</p>

CSS

.nota::before  { content: "➜ "; }
.preco::after { content: " R$"; }

Resultado

Observação

49,90

::first-letter parte do texto

Estiliza só a primeira letra — clássico recurso de capitular editorial.

HTML

<p>Era uma vez um seletor
muito poderoso que...</p>

CSS

p::first-letter {
  font-size: 2.6rem;
  color: tomato;
  float: left;
}

Resultado

Era uma vez um seletor muito poderoso que transformava apenas a primeira letra deste parágrafo inteiro.

::first-line parte do texto

Estiliza apenas a primeira linha do bloco (recalculada conforme a largura).

HTML

<p>Esta primeira linha recebe
um estilo diferente do resto
do parágrafo.</p>

CSS

p::first-line {
  font-variant: small-caps;
  color: teal;
}

Resultado

Esta primeira linha recebe um estilo diferente do resto do parágrafo, que volta ao normal a partir da segunda linha em diante.

::selection parte do texto

Estiliza o trecho que o usuário seleciona com o mouse. Selecione o texto →

HTML

<p>Selecione este texto com
o mouse para ver o efeito.</p>

CSS

p::selection {
  background: goldenrod;
  color: white;
}

Resultado

Selecione este texto com o mouse para ver a cor de fundo da seleção mudar.

::placeholder parte do input

Estiliza o texto-fantasma de campos de formulário.

HTML

<input placeholder="Seu nome...">

CSS

input::placeholder {
  color: tomato;
  font-style: italic;
}

Resultado

Seletores de Atributo

Selecionam elementos pela presença ou pelo valor de um atributo HTML. Escritos entre colchetes [ ].

[attr] existe

Seleciona elementos que possuem o atributo, qualquer que seja o valor.

HTML

<a target="_blank">Abre em nova aba</a>
<a>Link comum</a>

CSS

a[target] {
  color: tomato;
  font-weight: 700;
}

Resultado

Abre em nova aba · Link comum

[attr=”valor”] igual a

Seleciona elementos cujo atributo é exatamente aquele valor.

HTML

<input type="password">
<input type="email">

CSS

input[type="password"] { border: 2px solid red; }
input[type="email"]    { border: 2px solid teal; }

Resultado

[attr^=”valor”] começa com

Seleciona quando o valor do atributo começa com o texto dado.

HTML

<a href="https://site.com">Seguro</a>
<a href="mailto:oi@x.com">E-mail</a>

CSS

a[href^="https"]  { color: olive; }
a[href^="mailto"] { color: goldenrod; }

Resultado

Link seguro (https)
Link de e-mail (mailto)

[attr$=”valor”] termina com

Seleciona quando o valor termina com o texto dado — ótimo para extensões de arquivo.

HTML

<a href="manual.pdf">Manual</a>
<a href="fotos.zip">Fotos</a>

CSS

a[href$=".pdf"]::after { content: " [PDF]"; }
a[href$=".zip"]::after { content: " [ZIP]"; }

Resultado

Manual · Fotos

[attr*=”valor”] contém

Seleciona quando o valor contém o texto em qualquer posição.

HTML

<a href="loja.brasil.com/x">Achado</a>
<a href="site.org">Ignorado</a>

CSS

a[href*="brasil"] {
  background: olive;
  color: white;
}

Resultado

Contém “brasil” · Sem “brasil”

[attr~=”valor”] palavra exata

Seleciona quando o valor contém aquela palavra inteira dentro de uma lista separada por espaços.

HTML

<span data-tags="html css js">Tem CSS</span>
<span data-tags="html js">Sem CSS</span>

CSS

span[data-tags~="css"] {
  outline: 2px solid tomato;
}

Resultado

Tem CSS · Sem CSS

[attr|=”valor”] valor ou prefixo-

Seleciona quando o valor é exatamente o texto, ou começa com ele seguido de hífen. Muito usado com lang.

HTML

<p lang="pt-BR">Português</p>
<p lang="en">Inglês</p>

CSS

p[lang|="pt"] {
  border-left: 4px solid teal;
  color: teal;
}

Resultado

Português (pt-BR)

Inglês (en)

Guia de Seletores CSS

Guia de
Seletores CSS

Seletores Simples

Sou um título

Título 4

Título 5

Título 6

Combinadores

Título

Título

Pseudo-classes

Pseudo-elementos

Seletores de Atributo

Links do Site

Social Links

Sobre o site