Seletores

Se você quiser que um texto seja maior e vermelho apenas se for o primeiro parágrafo de um artigo, como fazer 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 de CSS, como esta.

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

O CSS oferece muitas opções para selecionar elementos e aplicar regras a eles, variando de muito simples a muito complexo, para ajudar a resolver situações como essa.

As partes de uma regra CSS

Para entender como os seletores funcionam e qual é a função deles no CSS, é importante conhecer as partes de uma regra de CSS. Uma regra CSS é um bloco de código que contém um ou mais seletores e uma ou mais declarações.

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

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

Seletores simples

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

Seletor universal

Browser Support

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

Source

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

* {
  color: hotpink;
}

Essa regra faz com que todos os elementos HTML da página tenham texto rosa-choque.

Seletor de tipo

Browser Support

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

Source

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

Browser Support

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

Source

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

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

Qualquer elemento que tenha a classe aplicada vai ficar vermelho:

.my-class {
  color: red;
}

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

Um elemento HTML que tenha uma classe .my-class ainda será associado à regra de CSS acima, mesmo que tenha 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 corresponder exatamente a essa classe.

Seletor de ID

Browser Support

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

Source

Um elemento HTML com um atributo id precisa ser o único elemento em uma página com esse valor de ID. Você seleciona elementos com um seletor de ID como este:

#rad {
  border: 1px solid blue;
}

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

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

Da mesma forma que o seletor de classe ., use um caractere # para instruir o CSS a procurar um elemento que corresponda ao id que o segue.

Seletor de atributo

Browser Support

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

Source

Você pode procurar elementos que tenham um determinado atributo HTML ou 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 têm um atributo data-type com um valor de primary, como este:

<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 valor.

[data-type] {
  color: red;
}
<div data-type="primary"></div>
<div data-type="secondary"></div>

Os 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 atributo.

[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 vai receber texto em vermelho. É possível fazer o oposto, ou seja, não diferenciar maiúsculas de minúsculas, usando um operador i.

Além dos operadores de caso, você tem acesso a operadores que correspondem a partes de strings nos valores de atributo.

/* 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". Isso permite prefixar o rótulo com base no tipo de arquivo usando um pseudoelemento.

Agrupar seletores

Um seletor não precisa corresponder apenas a um único elemento. É possível agrupar vários seletores separando-os com 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 os seletores simples

* {}

Que tipo de seletor simples é usado no snippet acima?

universal
classe
atributo
ID
div {}

Que tipo de seletor simples é usado no snippet acima?

ID
classe
atributo
tipo

Pseudoclasses e pseudoelementos

O CSS oferece tipos de seletor úteis que se concentram em um estado específico da plataforma, como quando um elemento é destacado, estruturas dentro de um elemento ou partes de um elemento.

Pseudoclasses

Os elementos HTML estão em vários estados, seja porque estão sendo interagidos, seja porque um dos elementos filhos está em um determinado estado.

Por exemplo, um elemento HTML pode ser destacado com o cursor do mouse por um usuário ou um elemento filho também pode ser destacado pelo usuário. 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 de pseudoclasses.

Pseudoelemento

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

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

Como na demonstração acima, em que você prefixou o rótulo de um link com o tipo de arquivo, é possível usar o pseudoelemento ::before para inserir conteúdo no início de um elemento ou o pseudoelemento ::after para inserir conteúdo no final de um elemento.

No entanto, os pseudoelementos não se limitam a inserir conteúdo. Você também pode usá-los para segmentar partes específicas de um elemento. Por exemplo, suponha que você tenha uma lista. Use ::marker para estilizar cada marcador de texto (ou número) na 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 seus conhecimentos sobre pseudoseletores

Quantos dois-pontos são usados nos seletores de pseudoelementos?

:::
::
:
p:hover {
  background: white;
  color: black;
}

Que tipo de pseudoseletor é usado no snippet acima?

Pseudoelemento
Pseudoclasse

Seletores complexos

Você já viu uma grande variedade de seletores, mas, às vezes, você vai precisar de mais controle detalhado com o CSS. É aí que os seletores complexos ajudam.

Vale lembrar que, embora os seletores a seguir ofereçam mais poder, só podemos criar uma hierarquia, selecionando elementos filhos. Não é possível segmentar para cima e selecionar um elemento pai. Vamos abordar o que é a cascata e como ela funciona em uma lição posterior.

Combinadores

Um combinador 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 de descendentes

Para entender os combinatores de 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 destaca o conteúdo em negrito. Como ele está dentro do <p>, ele é um elemento filho.

Um Combinador de descendentes permite segmentar um elemento filho. Isso usa um espaço () para instruir o navegador a procurar elementos filhos:

p strong {
  color: blue;
}

Esse snippet seleciona todos os elementos <strong> que são elementos filhos de <p>, tornando-os azuis de forma recursiva.

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

Esse efeito é melhor visualizado no exemplo acima, usando o seletor de combinações, .top div. Essa regra CSS adiciona padding à esquerda 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 saber como o elemento .top tem vários elementos filhos <div>, que, por sua vez, têm elementos filhos <div>.

Combinador de irmão seguinte

Você pode procurar um elemento que segue imediatamente outro usando um caractere + no seletor.

Para adicionar espaço entre elementos empilhados, use o combinator de irmão seguinte para adicionar espaço somente se um elemento for um irmão seguinte 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ê está selecionando todos os elementos filhos de .top, essa regra pode criar espaço extra e desnecessário. O combinador de irmão seguinte, combinado com um seletor universal, permite controlar não apenas quais elementos recebem espaço, mas também aplicar espaço a qualquer elemento. Isso oferece flexibilidade a longo prazo, independentemente dos elementos HTML que aparecem em .top.

Combinador de irmãos subsequentes

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

Use um seletor subsequente com uma pseudoclasse:checked para criar um elemento de alternância puro do CSS.

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) permite mais controle sobre a recursão que vem com os seletores de combinador. Ao usar o caractere >, você limita o seletor do combinador para aplicar somente a filhos diretos.

Considere o exemplo anterior de seletor de irmão seguinte. O espaço é adicionado a cada irmão seguinte, mas se um desses elementos também tiver elementos irmãos seguintes como filhos, isso poderá resultar em um espaço extra indesejado.

Para aliviar esse problema, mude o seletor de irmão seguinte para incorporar um combinador filho: > * + *. A regra agora apenas se aplica a filhos diretos de .top.

Seletores compostos

É possível combinar seletores para aumentar a especificidade e a legibilidade. Por exemplo, para segmentar elementos <a>, que também têm uma classe .my-class, escreva o seguinte:

a.my-class {
  color: red;
}

Isso não aplicaria uma cor vermelha a todos os links e também aplicaria a cor vermelha apenas a .my-class if estivesse em um elemento <a>. Para mais informações, consulte o módulo de especificidade.

Teste seu conhecimento

Teste seus conhecimentos sobre seletores complexos

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

+
*
÷
.
>
section.awesome {
  border: 1px solid hotpink;
}

O seletor acima é um exemplo de...

Seletor composto
Combinador
Terminator

Recursos