The CSS Podcast - 002: Selectors
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.
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
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
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
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
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
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;
}
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?
div {}
Que tipo de seletor simples é usado no snippet acima?
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?
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.
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.
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...