Podcast do CSS - 002: Seletores
Se você tem um texto que quer que seja maior e vermelho se for o primeiro parágrafo de um artigo, como 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 aplica 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, desde as mais simples até as mais complexas, para ajudar a resolver situações como essa.
As partes de uma regra de CSS
Para entender como os seletores funcionam e a função deles no CSS, é importante conhecer as partes de uma regra de 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 propriedades e valores que aplica estilos aos elementos correspondentes aos seletores.
Uma regra CSS pode ter quantas declarações e seletores você quiser.
Seletores simples
O grupo de seletores mais simples 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 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
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 ficará vermelho:
.my-class {
color: red;
}
O . só está presente no CSS, 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 no CSS, em que um caractere especial ou um conjunto de caracteres é usado para definir os tipos de seletor.
Um elemento HTML que tenha uma classe .my-class ainda será correspondido à regra 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 deve ser o único em uma página com esse valor de ID.
É possível selecionar elementos com um seletor de ID como este:
#rad {
border: 1px solid blue;
}
Esse CSS aplicaria uma borda azul ao elemento HTML que tivesse um id de rad, desta forma:
<div id="rad"></div>
Assim como o seletor de classe .,
use um caractere # para instruir o CSS a procurar um elemento que corresponda à id que o segue.
Seletor de atributo
Use o seletor de atributo para procurar elementos com um atributo HTML específico ou um valor específico para um atributo HTML.
Instrua o CSS a procurar atributos envolvendo o seletor com colchetes ([ ]).
[data-type='primary'] {
color: red;
}
O 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,
também é possível procurar elementos com o atributo presente, independente do valor.
[data-type] {
color: red;
}
<div data-type="primary"></div>
<div data-type="secondary"></div>
Os dois elementos <div> terão texto em vermelho.
É possível usar seletores de atributos que diferenciam maiúsculas de minúsculas
adicionando um operador s a ele.
[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 receberá texto em vermelho.
Você pode fazer o oposto, ou seja, não diferenciar maiúsculas de minúsculas, usando um operador i.
Além dos operadores de maiúsculas e minúsculas, 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;
}
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 com o nome .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?
[] são usados para seletores simples de atributo.# são usados para seletores simples de ID.* é o seletor simples universal.. são usados para seletores simples de class.div {}
Que tipo de seletor simples é usado no snippet acima?
. é usado para seletores simples de classe.element é usado para seletores simples de tipo.[] são usados para seletores simples de atributo.# é usado para seletores simples de ID.Pseudoclasses e pseudoelementos
O CSS oferece tipos de seletores úteis que focam em um estado específico da plataforma, como quando um elemento é passado sobre um elemento, estruturas dentro de um elemento ou partes dele.
Pseudoclasses
Os elementos HTML ficam em vários estados, seja porque há interação ou um dos elementos filhos está em um determinado estado.
Por exemplo, um usuário pode passar o cursor sobre um elemento HTML
ou 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 de pseudoclasses.
Pseudoelemento
Os pseudoelementos diferem 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 dois-pontos (:), usamos dois-pontos (::).
.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 que ele era,
use o pseudoelemento ::before para inserir conteúdo no início de um elemento
ou ::after para inserir conteúdo no final de um elemento.
No entanto, os pseudoelementos não se limitam à inserção de conteúdo.
Eles também podem ser usados 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;
}
Você também pode 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 pseudosseletores
Os seletores de pseudoelementos usam quantos dois-pontos?
: é usado para segmentar pseudoclasses.:: são usadas para segmentar pseudoelementos.p:hover {
background: white;
color: black;
}
Qual tipo de pseudoseletor é usado no snippet acima?
: é usado para segmentar pseudoclasses.:: são usadas para segmentar pseudoelementos.Seletores complexos
Você já viu uma grande variedade de seletores. No entanto, às vezes, é necessário ter um controle mais refinado com o CSS. É aí que os seletores complexos atuam para ajudar.
Vale lembrar que, embora os seletores a seguir nos deem mais poder, só podemos selecionar elementos filhos em cascata. Não é possível segmentar para cima e selecionar um elemento pai. Abordamos 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 for p > strong, o combinador será o caractere >.
Os seletores que usam esses combinadores ajudam você a selecionar itens com base na posição deles no documento.
Integrador descendente
Para entender os combinadores descendentes, é preciso primeiro entender os elementos pai e filho.
<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>
O elemento pai é a <p>, que contém texto.
Dentro desse elemento <p>, há um elemento <strong>, deixando o conteúdo em negrito.
Por estar dentro do <p>, ele é um elemento filho.
Com um combinador descendente, é possível segmentar um elemento filho.
Isso usa um espaço () para instruir o navegador a procurar elementos filhos:
p strong {
color: blue;
}
Esse snippet seleciona apenas todos os elementos <strong>
que são filhos de elementos <p>, tornando-os azuis recursivamente.
Esse efeito é melhor visualizado no exemplo acima,
usando o seletor do combinador, .top div.
Essa regra de 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 si só,
têm elementos filhos <div>.
Próximo combinador irmão
É possível procurar um elemento que aparece imediatamente após 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 uma margem a todos os elementos filhos de .top
usando o seguinte seletor:
.top * {
margin-top: 1em;
}
O problema é que, como você está selecionando cada elemento filho de .top, essa regra pode criar espaço extra e desnecessário.
O próximo combinador irmão,
com um seletor universal, permite não apenas controlar quais elementos recebem espaço,
como também aplicar espaço a qualquer elemento.
Isso oferece alguma flexibilidade de longo prazo,
independente dos elementos HTML que aparecem em .top.
Subsequente - combinador de irmão
Um combinador subsequente é muito semelhante a um próximo seletor irmão.
No entanto, em vez de um caractere +,
use um caractere ~.
A diferença é que um elemento só precisa seguir outro com o mesmo pai,
em vez de ser o próximo elemento com o mesmo pai.
Esse combinador subsequente fornece um pouco menos de rigidez,
o que é útil em contextos como o exemplo acima,
em que mudamos a cor de uma chave personalizada quando a caixa de seleção associada tem o estado :checked.
Combinação filho
Um combinador filho, também conhecido como descendente direto,
permite mais controle sobre a recursão que acompanha os seletores.
Ao usar o caractere >, você limita o seletor do combinador para aplicar apenas a filhos diretos.
Considere o exemplo anterior 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, poderá resultar em espaçamento 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
É 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 aplica uma cor vermelha a todos os links,
e também só aplica a cor vermelha a .my-class if ele estiver em um elemento <a>.
Para saber mais, consulte o módulo de especificidade.
Teste seu conhecimento
Teste seus conhecimentos sobre seletores complexos
Qual dos seguintes símbolos não é um combinador de seletores?
section.awesome {
border: 1px solid hotpink;
}
O seletor acima é um exemplo de...