O podcast do CSS - 015: Pseudoclasses
Digamos que você tenha um formulário de inscrição por e-mail
e queira que o campo do formulário de e-mail tenha uma borda vermelha se ele contiver um endereço de e-mail inválido.
Como fazer isso?
Você pode usar uma pseudoclasse CSS :invalid
,
que é uma das muitas pseudoclasses fornecidas pelo navegador.
Uma pseudoclasse permite aplicar estilos com base em mudanças de estado e fatores externos. Isso significa que seu design pode reagir à entrada do usuário, como um endereço de e-mail inválido. Eles são abordados no módulo seletores, que vai explicar tudo com mais detalhes.
Ao contrário dos pseudoelementos, que você pode aprender mais no módulo anterior, as pseudoclasses se conectam a estados específicos em que um elemento pode estar, em vez de estilizar partes desse elemento de forma geral.
Estados interativos
As pseudoclasses a seguir são aplicadas devido a uma interação do usuário com sua página.
:hover
Se um usuário tiver um dispositivo apontador, como um mouse ou trackpad,
e o colocar sobre um elemento,
você poderá se conectar a esse estado com
:hover
para aplicar estilos.
Essa é uma maneira útil de indicar que um elemento pode ser interagido.
:active
Esse estado é acionado quando um elemento está sendo interagido ativamente, como um clique, antes que o clique seja liberado. Se um dispositivo apontador, como um mouse, for usado, esse estado é quando o clique começa e ainda não foi liberado.
:focus
, :focus-within
e :focus-visible
Se um elemento puder receber foco, como um <button>
,
é possível reagir a esse estado com a
pseudoclasse :focus
.
Você também pode reagir se um elemento filho do seu elemento receber foco com
:focus-within
.
Elementos com foco, como botões, mostram um anel de foco quando estão em foco, mesmo quando clicados. Nesse tipo de situação, o desenvolvedor vai aplicar o seguinte CSS:
button:focus {
outline: none;
}
Esse CSS remove o anel de foco padrão do navegador quando um elemento recebe o foco,
o que apresenta um problema de acessibilidade para usuários que navegam em uma página da Web com um teclado.
Se não houver um estilo de foco,
não será possível acompanhar onde o foco está no momento ao usar a tecla tab.
Com :focus-visible
,
é possível apresentar um estilo de foco quando um elemento recebe o foco pelo teclado,
usando também a regra outline: none
para impedir que um dispositivo de ponteiro interaja com ele.
button:focus {
outline: none;
}
button:focus-visible {
outline: 1px solid black;
}
:target
A pseudoclasse :target
seleciona um elemento que tem um id
correspondente a um fragmento de URL.
Digamos que você tenha o seguinte HTML:
<article id="content">
…
</article>
É possível anexar estilos a esse elemento quando o URL contém #content
.
#content:target {
background: yellow;
}
Isso é útil para destacar áreas que podem ter sido vinculadas especificamente, como o conteúdo principal de um site, por meio de um link de pulo.
Estados históricos
:link
A pseudoclasse :link
pode ser aplicada a qualquer elemento <a>
que tenha um valor href
que ainda não foi visitado.
:visited
É possível estilizar um link que já foi visitado pelo usuário usando a
pseudoclasse :visited
.
Esse é o estado oposto a :link
, mas você tem menos propriedades CSS para usar por
motivos de segurança.
Só é possível estilizar color
, background-color
,
border-color
, outline-color
e a cor do SVG fill
e stroke
.
A ordem é importante
Se você definir um estilo :visited
,
ele poderá ser substituído por uma pseudoclasse de link com pelo menos a mesma especificidade.
Por isso,
recomendamos que você use a regra LVHA para estilizar links com pseudoclasses em uma ordem específica:
:link
, :visited
, :hover
, :active
.
a:link {}
a:visited {}
a:hover {}
a:active {}
Estados do formulário
As pseudoclasses a seguir podem selecionar elementos de formulário, nos vários estados em que esses elementos podem estar durante a interação com eles.
:disabled
e :enabled
Se um elemento de formulário,
como um <button>
, for desativado pelo navegador,
você poderá se conectar a esse estado com a
pseudoclasse :disabled
.
A pseudoclasse :enabled
está disponível para o estado oposto,
embora os elementos de formulário também sejam :enabled
por padrão.
Portanto, talvez você não precise dessa pseudoclasse.
:checked
e :indeterminate
A pseudoclasse :checked
fica disponível quando um elemento de formulário de suporte,
como uma caixa de seleção ou um botão de opção, está marcado.
O estado :checked
é binário(verdadeiro ou falso),
mas as caixas de seleção têm um estado intermediário quando não estão marcadas ou desmarcadas.
Isso é conhecido como estado
:indeterminate
.
Um exemplo desse estado é quando você tem um controle "selecionar tudo" que marca todas as caixas de seleção em um grupo. Se o usuário desmarcar uma dessas caixas, a caixa raiz não representará mais "todos", portanto, será colocada em um estado indeterminado.
O elemento <progress>
também tem um estado indeterminado que pode receber estilo.
Um caso de uso comum é dar a ele uma aparência listrada para indicar que não se sabe quanto mais é necessário.
:placeholder-shown
Se um campo de formulário tiver um atributo placeholder
e nenhum valor,
a pseudoclasse :placeholder-shown
poderá ser usada para anexar estilos a esse estado.
Assim que houver conteúdo no campo,
com ou sem placeholder
,
esse estado não será mais aplicado.
Estados de validação
É possível responder à validação de formulários HTML com pseudoclasses, como
:valid
,
:invalid
e
:in-range
.
As pseudoclasses :valid
e :invalid
são úteis para contextos
como um campo de e-mail que tem um pattern
que precisa ser correspondido
para ser um campo válido.
Esse estado de valor válido pode ser mostrado ao usuário,
ajudando-o a entender que ele pode avançar com segurança para o próximo campo.
A pseudoclasse :in-range
fica disponível se uma entrada tiver um min
e um max
,
como uma entrada numérica e o valor estiver dentro desses limites.
Com formulários HTML,
é possível determinar que um campo é obrigatório com o atributo required
.
A pseudoclasse :required
vai estar disponível para campos obrigatórios.
Os campos que não são obrigatórios podem ser selecionados com a
pseudoclasse :optional
.
Como selecionar elementos por índice, ordem e ocorrência
Há um grupo de pseudoclasses que selecionam itens com base no local deles no documento.
:first-child
e :last-child
Se você quiser encontrar o primeiro ou o último item,
use
:first-child
e
:last-child
.
Essas pseudoclasses vão retornar o primeiro ou o último elemento em um grupo de elementos irmãos.
:only-child
Também é possível selecionar elementos que não têm irmãos,
com a
pseudoclasse :only-child
.
:first-of-type
e :last-of-type
Você pode selecionar o
:first-of-type
e o
:last-of-type
, que, a princípio,
parecem fazer a mesma coisa que :first-child
e :last-child
, mas considere este HTML:
<div class="my-parent">
<p>A paragraph</p>
<div>A div</div>
<div>Another div</div>
</div>
E este CSS:
.my-parent div:first-child {
color: red;
}
Nenhum elemento seria colorido de vermelho porque o primeiro filho é um parágrafo e não um div.
A pseudoclasse :first-of-type
é útil nesse contexto.
.my-parent div:first-of-type {
color: red;
}
Embora o primeiro <div>
seja o segundo filho,
ele ainda é o primeiro do tipo dentro do elemento .my-parent
.
Com essa regra, ele será colorido em vermelho.
:nth-child
e :nth-of-type
Você não está limitado aos primeiros e últimos filhos e tipos.
As pseudoclasses :nth-child
e
:nth-of-type
permitem especificar um elemento que está em um determinado índice.
A indexação em seletores CSS começa em 1.
Também é possível transmitir mais de um índice para essas pseudoclasses.
Se você quiser selecionar todos os elementos pares, use :nth-child(even)
.
Também é possível criar seletores mais complexos que encontram itens em intervalos espaçados regularmente, usando a microsintaxe An+B.
li:nth-child(3n+3) {
background: yellow;
}
Esse seletor seleciona cada terceiro item,
começando pelo item 3.
O n
nessa expressão é o índice,
que começa em zero. O 3 (3n
) é o valor pelo qual você multiplica esse índice.
Digamos que você tenha sete itens <li>
.
O primeiro item selecionado é 3 porque 3n+3
é traduzido para (3 * 0) + 3
.
A próxima iteração escolheria o item 6 porque n
agora foi incrementado para 1
,
ou seja, (3 * 1) + 3)
.
Essa expressão funciona para :nth-child
e :nth-of-type
.
Você pode brincar com esse tipo de seletor neste testador de n-ésima criança ou nesta ferramenta de seletor de quantidade.
:only-of-type
Por fim, é possível encontrar o único elemento de um determinado tipo em um grupo de elementos irmãos com
:only-of-type
.
Isso é útil se você quiser selecionar listas com apenas um item
ou encontrar o único elemento em negrito em um parágrafo.
Como encontrar elementos vazios
Às vezes, pode ser útil identificar elementos completamente vazios, e há uma pseudoclasse para isso também.
:empty
Se um elemento não tiver filhos, a
pseudoclasse :empty
será aplicada a eles.
No entanto, os filhos não são apenas elementos HTML ou nós de texto: eles também podem ser espaços em branco,
o que pode ser confuso ao depurar o HTML a seguir e se perguntar por que ele não está funcionando com :empty
:
<div>
</div>
O motivo é que há alguns espaços em branco entre o <div>
de abertura e o de fechamento.
Portanto, o vazio não vai funcionar.
A pseudoclasse :empty
pode ser útil se você tiver pouco controle sobre o HTML e quiser ocultar elementos vazios,
como um editor de conteúdo WYSIWYG.
Aqui, um editor adicionou um parágrafo vazio e fora do lugar.
<article class="post">
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
<p></p>
<p>Curabitur blandit tempus porttitor.</p>
</article>
Com :empty
, você pode encontrar e ocultar isso.
.post :empty {
display: none;
}
Como encontrar e excluir vários elementos
Algumas pseudoclasses ajudam a escrever CSS mais compacto.
:is()
Se você quiser encontrar todos os elementos filhos h2
, li
e img
em um elemento .post
,
tente escrever uma lista de seletores como esta:
.post h2,
.post li,
.post img {
…
}
Com a pseudoclasse :is()
, é possível escrever uma versão mais compacta:
.post :is(h2, li, img) {
…
}
A pseudoclasse :is
é mais compacta do que uma lista de seletores e também é mais tolerante.
Na maioria dos casos,
se houver um erro ou um seletor sem suporte em uma lista de seletores,
a lista de seletores inteira vai parar de funcionar.
Se houver um erro nos seletores transmitidos em uma pseudoclasse :is
,
ele vai ignorar o seletor inválido, mas usar os que forem válidos.
:not()
Também é possível excluir itens com a
pseudoclasse :not()
.
Por exemplo, você pode usá-lo para estilizar todos os links que não têm um atributo class
.
a:not([class]) {
color: blue;
}
Uma pseudoclasse :not
também pode ajudar a melhorar a acessibilidade.
Por exemplo, um <img>
precisa ter um alt
, mesmo que seja um valor vazio.
Você pode escrever uma regra CSS que adiciona um contorno vermelho grosso a imagens inválidas:
img:not([alt]) {
outline: 10px red;
}
Teste seu conhecimento
Teste seus conhecimentos sobre pseudoclasses
As pseudoclasses funcionam como se uma classe tivesse sido aplicada dinamicamente a um elemento, enquanto os pseudoelementos atuam no próprio elemento.
Qual das opções a seguir é uma pseudoclasse funcional?
:not()
:is()
:empty
:target
Quais das pseudoclasses a seguir são devido a uma interação do usuário?
:hover
:focus-within
:press
:target
:squeeze
Quais das opções a seguir são pseudoclasses de estado <form>
?
:checked
:fresh
:enabled
:in-range
:valid
:loading
:indeterminate