Seletores

Podcast do CSS - 002: seletores

Se você tem um texto que só quer que seja maior e vermelho se for o primeiro parágrafo de um artigo, como se faz isso?

<article>
  <p>I want to be red and larger than the other text.</p>
  <p>I want to be normal sized and the default color.</p>
</article>

Você usa um seletor de CSS para encontrar esse elemento específico e aplicar uma regra CSS, assim.

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

O CSS oferece várias opções para selecionar elementos e aplicar regras a eles, que variam de muito simples a muito complexas, para ajudar a resolver situações como essa.

As partes de uma regra CSS

Para entender como os seletores funcionam e o papel deles no CSS, é importante conhecer as partes de uma regra CSS. Uma regra CSS é um bloco de código, contendo um ou mais seletores e uma ou mais declarações.

Uma imagem de uma regra CSS com o seletor .my-css-rule.

Nesta regra CSS, o seletor é .my-css-rule. que encontra todos os elementos com uma classe my-css-rule na página. Há três declarações entre chaves. Uma declaração é um par de propriedades e valores que aplica estilos aos elementos correspondidos pelos seletores. Uma regra CSS pode ter quantas declarações e seletores você quiser.

Seletores simples

O grupo mais simples de seletores tem como alvo elementos HTML e classes, IDs e outros atributos que podem ser adicionados a uma tag HTML.

Seletor universal

Compatibilidade com navegadores

  • Chrome: 1.
  • Borda: 12.
  • Firefox: 1.
  • Safari: 1.

Origem

Um seletor universal, também conhecido como caractere curinga, corresponde a qualquer elemento.

* {
  color: hotpink;
}

Essa regra faz com que todos os elementos HTML na página tenham texto hotpink.

Seletor de tipo

Compatibilidade com navegadores

  • Chrome: 1.
  • Borda: 12.
  • Firefox: 1.
  • Safari: 1.

Origem

Um seletor de tipo corresponde diretamente a um elemento HTML.

section {
  padding: 2em;
}

Essa regra faz com que cada elemento <section> tenha 2em de padding em todos os lados.

Seletor de classe

Compatibilidade com navegadores

  • Chrome: 1.
  • Borda: 12.
  • Firefox: 1.
  • Safari: 1.

Origem

Um elemento HTML pode ter um ou mais itens definidos no atributo class. A seletor de classe corresponde a qualquer elemento que tenha essa classe aplicada a ele.

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

Qualquer elemento que tenha a classe aplicada a ele ficará vermelho:

.my-class {
  color: red;
}

Observe como . está presente apenas no CSS, e não no HTML. Isso ocorre porque o caractere . instrui a linguagem CSS a corresponder aos membros do atributo de classe. Esse é um padrão comum em CSS, em que um caractere especial, ou conjunto de caracteres, é usado para definir tipos de seletores.

Um elemento HTML que tenha uma classe de .my-class ainda corresponderá à regra CSS acima. mesmo que tenham várias outras classes, como esta:

<div class="my-class another-class some-other-class"></div>

Isso ocorre porque o CSS procura um atributo class que contenha a classe definida, em vez de fazer a correspondência exata com essa classe.

Seletor de ID

Compatibilidade com navegadores

  • Chrome: 1.
  • Borda: 12.
  • Firefox: 1.
  • Safari: 1.

Origem

Um elemento HTML com um atributo id precisa ser o único em uma página com esse valor de ID. Você seleciona elementos com uma Seletor de ID da seguinte forma:

#rad {
  border: 1px solid blue;
}

Esse CSS aplicaria uma borda azul ao elemento HTML que tem um id de rad, desta forma:

<div id="rad"></div>

Assim como no seletor de classe ., use um caractere # para instruir o CSS a procurar um elemento que corresponda ao id que o segue.

Seletor de atributos

Compatibilidade com navegadores

  • Chrome: 1.
  • Borda: 12.
  • Firefox: 1.
  • Safari: 3.

Origem

Você pode procurar elementos com um determinado atributo HTML, ou têm um determinado valor para um atributo HTML, usando o seletor de atributos. Instrua o CSS a procurar atributos envolvendo o seletor com colchetes ([ ]).

[data-type='primary'] {
  color: red;
}

Esse CSS procura todos os elementos que tenham um atributo data-type com um valor primary, desta forma:

<div data-type="primary"></div>

Em vez de procurar um valor específico de data-type, você também pode procurar elementos com o atributo presente, independentemente do seu valor.

[data-type] {
  color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

Esses dois elementos <div> terão texto vermelho.

É possível usar seletores de atributo que diferenciam maiúsculas de minúsculas adicionando um operador s ao seletor de atributos.

[data-type='primary' s] {
  color: red;
}

Isso significa que, se um elemento HTML tiver um data-type de Primary, em vez de primary, ele não receberia texto em vermelho. É possível fazer o contrário (não diferenciar maiúsculas de minúsculas) usando um operador i.

Junto com os operadores de caso, você tem acesso a operadores que correspondem a partes de strings dentro de valores de atributos.

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}
Nesta demonstração, o operador `$` no seletor de atributos recebe o tipo de arquivo do atributo `href`. Assim, é possível prefixar o rótulo com base nesse tipo de arquivo usando um pseudoelemento.

Seletores de agrupamento

Um seletor não precisa corresponder a apenas um elemento. Você pode agrupar vários seletores separando-os por vírgulas:

strong,
em,
.my-class,
[lang] {
  color: red;
}

Este exemplo estende a mudança de cor para os elementos <strong> e <em>. Ele também é estendido para uma classe chamada .my-class e um elemento que tem um atributo lang.

Teste seu conhecimento

Teste seus conhecimentos sobre seletores simples

* {}

Que tipo de seletor simples é usado no snippet acima?

atributo
[] são usados para seletores simples de atributo.
ID
# são usadas para seletores simples de ID.
universal
* é o seletor simples universal.
classe
. são usadas para seletores simples de classe.
 
div {}

Que tipo de seletor simples é usado no snippet acima?

classe
Um . é usado para seletores simples de classe.
tipo
Um nome element é usado para seletores simples de tipo.
atributo
Colchetes [] são usados para seletores simples de atributo.
ID
Um # é usado para seletores simples de ID.

Pseudoclasses e pseudoelementos

O CSS fornece tipos de seletores úteis que se concentram em um estado específico da plataforma, por exemplo, quando o usuário passa o cursor sobre um elemento, estruturas dentro dele ou partes dele.

Pseudoclasses

Os elementos HTML se encontram em vários estados, seja porque há uma interação, ou se um dos elementos filhos estiver em um determinado estado.

Por exemplo, um usuário pode passar o cursor sobre um elemento HTML com o ponteiro do mouse ou o usuário também passar o cursor sobre um elemento filho. Para essas situações, use a pseudoclasse :hover.

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

Saiba mais no módulo pseudoclasses.

Pseudoelemento

Os pseudoelementos diferem das pseudoclasses porque, em vez de responder ao estado da plataforma, atuam como se estivessem inserindo um novo elemento com CSS. Os pseudoelementos também são sintaticamente diferentes das pseudoclasses, porque, em vez de dois-pontos (:), usamos dois-pontos (::).

.my-element::before {
  content: 'Prefix - ';
}

Como na demonstração acima, em que você prefixou o marcador de um link com o tipo de arquivo, você pode usar o pseudoelemento ::before para inserir conteúdo no início de um elemento, ou o pseudoelemento ::after para inserir conteúdo no fim de um elemento.

No entanto, os pseudoelementos não se limitam à inserção de conteúdo. Também é possível usá-los para segmentar partes específicas de um elemento. Por exemplo, suponha que você tenha uma lista. Use ::marker para definir o estilo de cada marcador (ou número) da lista.

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

Também é possível usar ::selection para estilizar o conteúdo destacado por um usuário.

::selection {
  background: black;
  color: white;
}

Saiba mais no módulo sobre pseudoelementos.

Teste seu conhecimento

Teste seu conhecimento sobre pseudosseletores

Quantos dois pontos são usados nos seletores de pseudoelemento?

:
Um : é usado para segmentar pseudoclasses.
::
Dois :: são usados para direcionar pseudoelementos.
:::
Isto é inválido e não tem destino algum.
 
p:hover {
  background: white;
  color: black;
}

Que tipo de pseudoseletor é usado no snippet acima?

Pseudoclasse
Um : é usado para segmentar pseudoclasses.
Pseudoelemento
Dois :: são usados para direcionar pseudoelementos.

Seletores complexos

Você já viu uma grande variedade de seletores, mas, às vezes, você precisará de um controle mais detalhado com o CSS. É aqui que os seletores complexos entram para ajudar.

Vale lembrar que, embora os seguintes seletores nos deem mais poder, só podemos fazer a cascata para baixo, selecionando elementos filhos. Não é possível segmentar para cima e selecionar um elemento pai. Vamos explicar o que é a cascata e como ela funciona em outra aula.

Combinadores

Um combinador é o que fica entre dois seletores. Por exemplo, se o seletor for p > strong, o combinador será o caractere >. Os seletores que usam esses combinadores ajudam a selecionar itens com base na posição deles no documento.

Combinador descendente

Para entender os combinadores descendentes, primeiro é preciso entender os elementos pai e filho.

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>

O elemento pai é o <p>, que contém texto. Dentro desse elemento <p> há um elemento <strong>, que deixa seu conteúdo em negrito. Como ele está dentro do <p>, é um elemento filho.

Um combinador descendente nos permite segmentar um elemento filho. Esse código usa um espaço () para instruir o navegador a procurar elementos filhos:

p strong {
  color: blue;
}

Este snippet seleciona todos os <strong> elementos que são elementos filhos apenas de elementos <p>, tornando-os azuis recursivamente.

Como o combinador descendente é recursivo, o padding adicionado a cada elemento filho é aplicado, resultando em um efeito escalonado.

Esse efeito é mais bem visualizado no exemplo acima, usando o seletor do combinador, .top div. Essa regra CSS adiciona padding esquerdo a esses elementos <div>. Como o combinador é recursivo, todos os elementos <div> que estão em .top terão o mesmo padding aplicado a eles.

Confira o painel HTML nesta demonstração para conferir como o elemento .top tem vários elementos filhos <div> que, por si só, ter <div> elementos filhos.

Próximo combinador irmão

Você pode procurar um elemento que aparece logo depois de outro usando um caractere + no seletor.

Para adicionar espaço entre elementos empilhados, use o próximo combinador irmão para adicionar espaço somente se um elemento for um próximo irmão de um elemento filho de .top.

Você pode adicionar margem a todos os elementos filhos de .top. usando o seguinte seletor:

.top * {
  margin-top: 1em;
}

O problema é que, como você seleciona todos os elementos filhos de .top, essa regra pode criar espaço extra e desnecessário. O próximo combinador irmão, Com um seletor universal, você não só controla quais elementos recebem espaço, como também mas também aplicar espaço a qualquer elemento. Isso oferece flexibilidade a longo prazo, independentemente dos elementos HTML que aparecem no .top.

Combinador irmão subsequente

Um combinador subsequente é muito semelhante a um seletor próximo irmão. No entanto, em vez de um caractere +, use um caractere ~. A diferença é que um elemento precisa seguir outro elemento com o mesmo pai, em vez de ser o próximo elemento com o mesmo pai.

Use um seletor subsequente junto com uma pseudoclasse `:checked` para criar um elemento switch de CSS puro.

Esse combinador subsequente oferece um pouco menos de rigidez, o que é útil em contextos como o exemplo acima, em que mudamos a cor de um interruptor personalizado quando a caixa de seleção associada tem o estado :checked.

Combinador filho

Um combinador filho (também conhecido como descendente direto). oferece mais controle sobre a recursão que acompanha os seletores combinadores. Ao usar o caractere >, você limita o seletor do combinador a ser aplicado apenas a filhos diretos.

Considere o exemplo anterior, próximo de seletor irmão. O espaço é adicionado a cada próximo irmão, mas se um desses elementos também tiver próximos elementos irmãos como filhos, isso pode resultar em um espaço extra indesejável.

Para aliviar esse problema, mude o próximo seletor irmão para incorporar um combinador filho: > * + *. A regra agora será aplicada apenas a filhos diretos de .top.

Seletores compostos

Você pode combinar seletores para aumentar a especificidade e a legibilidade. Por exemplo, para segmentar elementos <a>, que também tenham uma classe de .my-class, escreva o seguinte:

a.my-class {
  color: red;
}

A cor vermelha não será aplicada a todos os links e também só aplicaria a cor vermelha à .my-class se ela estivesse em um elemento <a>. Para mais informações, consulte o módulo de especificidade (link em inglês).

Teste seu conhecimento

Teste seu conhecimento sobre seletores complexos

Qual dos símbolos a seguir não é um combinador de seletor?

>
O combinador descendente direto.
÷
Inválido, não é um símbolo CSS.
+
O próximo combinador irmão.
*
Esse seletor simples e universal.
.
O seletor simples de classe.
 
section.awesome {
  border: 1px solid hotpink;
}

O seletor acima é um exemplo de...

Combinador
Símbolo usado para combinar seletores em um mais específico.
Seletor composto
Quando dois ou mais seletores são usados juntos, sem um combinador, para criar um seletor mais específico.
Exterminador do Futuro
Não é um tipo de seletor, mas parece um, não é? 🤖

Recursos