Como usar os seletores CSS: um guia completo

PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO

E aí turma, hoje eu vou falar sobre seletores CSS, lembrando que essa linguagem é utilizada para fazer a formatação visual de todos os elementos em um site na web, do layout até os mínimos detalhes.

O objetivo do post é mostrar para que servem e como utilizar os seletores CSS, então vou ser bem direto e apresentar tudo que você precisa para tirar o máximo desse recurso, então vamos lá!

Se você tiver dificuldade em aplicar os conceitos deste post, aprenda mais sobre como usar HTML e CSS em conjunto para criar seu primeiro site, antes de prosseguir.

Seletores CSS

Como você já sabe, HTML é utilizada para criar os elementos do site e organizar toda a estrutura, por exemplo, se você quer definir um título, basta fazer <h1>Meu título</h1>, certo?

Já a linguagem CSS é utilizada para aplicar formatação nos elementos HTML, então se você quer aplicar uma cor azul no título, basta utilizar <h1 style="color:blue">Meu título</h1>, simples assim.

O CSS inline, como no exemplo anterior, deve ser usado com moderação. O ideal é colocar todas as regras em um arquivo .css específico ou no cabeçalho dentro da tag HEAD.

Faça na prática! Veja o vídeo completo sobre Como usar na prática os seletores avançados de CSS: um guia completo aqui! Aproveite para assinar o canal e ficar por dentro das novidades em vídeo.

Tudo é muito simples, como apresentando até aqui, mas agora vem a grande questão: como dizer para o navegador que você quer que somente o título fique azul, e não o site inteiro? É aí que entram os seletores!

Existem várias formas de "selecionar" um elemento ou conjunto deles e formatar, e é isso que vou deixar aqui, um guia completo pra você fazer experiências e aplicar no seu site.

No exemplo do nosso título, você poderia fazer assim: h1{color:blue}, mas isso aplicaria a formatação em todos os elementos H1 da sua página. É aí que, mais uma vez, entram os seletores, pra você conseguir aplicar somente onde deseja!

Seletor / Exemplo	Descrição
.intro	Seleciona todos os elementos com class="intro"
#primeironome	Seleciona o elemento com id="primeironome"
*	Seleciona todos os elementos
p	Seleciona todos os elementos <p>
div, p	Seleciona todos os elementos <div> e todos os elementos <p>
div p	Seleciona todos os elementos <p> dentro de elementos <div>
div > p	Seleciona todos os elementos <p> onde o pai é um elemento <div>
div + p	Seleciona todos os elementos <p> que são colocados imediatamente após elementos <div>
p ~ ul	Seleciona todos os elementos <ul> precedidos por um elemento <p>
[target]	Seleciona todos os elementos com o atributo target
[target=_blank]	Seleciona todos os elementos com o atributo target="_blank"
[title~=flor]	Seleciona todos os elementos com o atributo title contendo a palavra "flor"
[lang|=pt]	Seleciona todos os elementos com o valor do atributo lang começando com "pt"
a[href^="https"]	Seleciona todo elemento <a> com o valor do atributo href começando com "https"
a[href$=".pdf"]	Seleciona todo elemento <a> com valor do atributo href terminando com ".pdf"
a[href*="ayltoninacio"]	Seleciona todo elemento <a> com o valor do atributo href contendo a string "ayltoninacio"
a:active	Seleciona todos os links ativos
p::after	Insere algo após o conteúdo de cada elemento <p>
p::before	Insere algo antes do conteúdo de cada elemento <p>
input:checked	Seleciona todo elemento <input> com checked
input:default	Seleciona o elemento <input> padrão
input:disabled	Seleciona todo elemento <input> com disabled
p:empty	Seleciona todos os elementos <p> que não tem filhos (incluindo nós de texto)
input:enabled	Seleciona todo elemento <input> ativo
p:first-child	Seleciona todo elemento <p> que é o primeiro filho de seu pai
p::first-letter	Seleciona a primeira letra de todos os elementos <p>
p::first-line	Seleciona a primeira linha de todos os elementos <p>
p:first-of-type	Seleciona todo o elemento <p> que é o primeiro elemento <p> de seu pai
input:focus	Seleciona o elemento input que tem foco
a:hover	Seleciona o link com o mouse sobre ele
input:in-range	Seleciona elementos input com um valor dentro de um intervalo especificado
input:indeterminate	Seleciona elementos input que estão em um estado indeterminado
input:invalid	Seleciona todos os elementos input com um valor inválido
p:lang(it)	Seleciona todos os elementos <p> com um atributo lang igual a "it" (italiano)
p:last-child	Seleciona todo elemento <p> que é o último filho de seu pai
p:last-of-type	Seleciona todo elemento <p> que é o último elemento <p> de seu pai
a:link	Seleciona todos os links que não foram visitados
:not(p)	Seleciona todos os elementos que não são elementos <p>
p:nth-child(2)	Seleciona todo elemento <p> que é o segundo filho de seu pai
p:nth-last-child(2)	Seleciona elemento <p> que é o segundo filho de seu pai, contando a partir do último filho
p:nth-last-of-type(2)	Seleciona todo elemento <p> que é o segundo elemento <p> de seu pai, contando a partir do último filho
p:nth-of-type(2)	Seleciona todo elemento <p> que é o segundo elemento <p> de seu pai
p:only-of-type	Seleciona todo elemento <p> que é o único elemento <p> de seu pai
p:only-child	Seleciona todo elemento <p> que é o único filho de seu pai
input:optional	Seleciona elementos input sem atributo "required"
input:out-of-range	Seleciona elementos input com um valor fora de um intervalo especificado
input::placeholder	Seleciona elementos input com texto placeholder
input:read-only	Seleciona elementos input com o atributo "readonly" especificado
input:read-write	Seleciona elementos input com o atributo "readonly" não especificado
input:required	Seleciona elementos input com o atributo "required" especificado
:root	Seleciona o elemento raiz do documento
::selection	Seleciona a parte de um elemento que é selecionado por um usuário
#news:target	Seleciona o elemento atual #news ativo (clicado em um URL contendo esse nome de âncora)
input:valid	Seleciona todos os elementos input com um valor válido
a:visited	Seleciona todos os links visitados