Seletores

Andy Bell

Se você tem algum texto que só deseja que fique maior e vermelho 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 CSS para encontrar aquele elemento específico e aplicar uma regra CSS, como esta.

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

O CSS fornece muitas 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 de CSS

Para entender como os seletores funcionam e sua função 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.

Nesta regra de CSS, o seletor é .my-css-rule que encontra todos os elementos com uma classe de my-css-rule na página. Existem 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 de CSS pode ter quantas declarações e seletores você desejar.

Seletores simples

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

Seletor universal

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

* {
  color: hotpink;
}

Esta regra faz com que cada elemento HTML na página tenha texto hotpink.

Seletor de tipo

Um seletor de tipo corresponde diretamente a um elemento HTML.

section {
  padding: 2em;
}

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

Seletor de classe

Um elemento HTML pode ter um ou mais itens definidos em seu atributo de class. O 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 terá a cor vermelha:

.my-class {
  color: red;
}

Observe como o . só está presente em CSS e não em HTML. Isso ocorre porque o . caractere instrui a linguagem CSS para corresponder aos membros do atributo de classe. Este é um padrão comum em CSS, onde um caractere especial, ou conjunto de caracteres, é usado para definir os tipos de seletor.

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

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

Isso ocorre porque o CSS procura por um atributo de class que contém a classe definida, em vez de corresponder exatamente a essa classe.

Seletor de ID

Um elemento HTML com um id deve 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;
}

Este CSS aplicaria uma borda azul ao elemento HTML que possui um id de rad , como este:

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

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

Seletor de atributo

Você pode procurar por elementos que possuem 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;
}

Este CSS procura todos os elementos que possuem um atributo de data-type de dados com um valor primary, como este:

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

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

[data-type] {
  color: red;
}

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

Ambos os <div> terão texto em vermelho.

Você pode usar seletores de atributo com distinção entre maiúsculas e minúsculas adicionando um s ao seu seletor de atributo.

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

Isso significa que se um elemento HTML tivesse um data-type de Primary, em vez de primary , ele não obteria texto em vermelho. Você pode fazer o oposto - não diferenciação de maiúsculas e minúsculas - usando um operador i

Junto com os operadores de caso, você tem acesso a operadores que combinam partes de strings dentro de 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;
}

Seletores de agrupamento

Um seletor não precisa corresponder a apenas um único elemento. Você pode 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> <em>. Ele também é estendido para uma classe chamada .my-class e um elemento que possui um atributo lang

Check your understanding

Test your knowledge of simple selectors

* {}

div {}

Pseudo-classes e pseudo-elementos

O CSS fornece tipos de seletores úteis que se concentram no estado específico da plataforma, como quando um elemento é passado, estruturas dentro de um elemento ou partes de um elemento.

Pseudo-classes

Os elementos HTML encontram-se em vários estados, seja porque interagem com eles ou porque um de seus elementos filhos está em um determinado estado.

Por exemplo, um elemento HTML pode ser passado com o ponteiro do mouse por um usuário ou um elemento filho também pode ser passado pelo usuário. Para essas situações, use a :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 pseudo-classes.

Pseudo-elemento

Os pseudo-elementos diferem das pseudo-classes porque em vez de responder ao estado da plataforma, eles agem como se estivessem inserindo um novo elemento com CSS. Pseudo-elementos também são sintacticamente diferente da pseudo-classes, porque em vez de usar um único sinal dois pontos (:), usamos dois pontos duplos (::).

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

Como na demonstração acima, onde você prefixou o rótulo de um link com o tipo de arquivo, você pode usar o pseudo-elemento ::before para inserir conteúdo no início de um elemento, ou o pseudo-elemento ::after no final de um elemento.

Pseudo-elementos não se limitam a inserir conteúdo, no entanto. Você também pode usá-los para direcionar 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) na lista

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

Você também pode usar ::selection para aplicar estio ao conteúdo que foi destacado por um usuário.

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

Saiba mais no módulo sobre pseudoelementos.

Check your understanding

Test your knowledge of pseudo selectors

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

Seletores complexos

Você já viu uma vasta gama de seletores, mas às vezes, você precisará de um controle mais refinado com seu CSS. É aqui que os seletores complexos entram em cena para ajudar.

Vale a pena lembrar que, embora os seletores a seguir nos deem mais poder, podemos apenas cascatear para baixo, selecionando os elementos filhos. Não podemos direcionar para cima e selecionar um elemento pai. Abordaremos o que é a cascata e como ela funciona em uma lição posterior.

Combinadores

Um combinador é o que fica entre dois seletores. Por exemplo, se o seletor foi p > strong, o combinador é o caractere >. Os seletores que usam esses combinadores ajudam a selecionar itens com base em suas posições no documento.

Combinador descendente

Para entender os combinadores descendentes, você precisa primeiro 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 o texto. Dentro desse <p> está um elemento <strong>, tornando seu conteúdo em negrito. Por estar dentro do <p>, é um elemento filho.

Um combinador descendente nos permite almejar um elemento filho. Isso usa um espaço () para instruir o navegador a procurar elementos filho:

p strong {
  color: blue;
}

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

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

Dê uma olhada no painel HTML nesta demonstração para ver como o .top tem vários <div> que, eles próprios, têm elementos filhos <div>

Próximo irmão combinador

Você pode procurar um elemento que segue imediatamente outro elemento usando um + em seu seletor.

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

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

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

O problema com isso é que, como você está selecionando cada elemento filho de .top, essa regra potencialmente cria espaço extra desnecessário. O próximo combinador irmão, misturado com um seletor universal, permite não apenas controlar quais elementos recebem espaço, mas também aplicar espaço a qualquer elemento. Isso fornece alguma flexibilidade de longo prazo, independentemente de quais elementos HTML aparecem em .top.

Subsequente - irmão combinador

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

Este combinador subsequente fornece um pouco menos de rigidez, o que é útil em contextos como o exemplo acima, onde alteramos a cor de um switch personalizado quando sua 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 do combinador. Ao usar o >, você limita o seletor de combinador para aplicar apenas aos filhos diretos.

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

Para aliviar esse problema, altere o próximo seletor irmão para incorporar um combinador filho: > * + *. A regra agora só se aplica a filhos diretos de .top .

Seletores compostos

Você pode combinar seletores para aumentar a especificidade e a legibilidade. Por exemplo, para direcionar <a>, que também têm uma classe de .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 apenas a cor vermelha a .my-class se estivesse em um elemento <a>. Para saber mais sobre isso, consulte o módulo de especificidade.

Check your understanding

Test your knowledge of complex selectors

section.awesome {
  border: 1px solid hotpink;
}

Recursos

• Referência de seletores CSS
• Jogo de seletores interativo
• Referência de pseudoclasse e pseudoelementos
• Uma ferramenta que traduz seletores de CSS em explicadores em inglês simples