Podcast do CSS - 015: pseudoclasses
Digamos que você tenha um formulário de inscrição de e-mail
e queira que o campo tenha uma borda vermelha se contiver um endereço de e-mail inválido.
Como fazer isso?
Você pode usar uma pseudoclasse CSS :invalid,
que é uma das várias pseudoclasses fornecidas pelo navegador.
Uma pseudoclasse permite aplicar estilos com base em mudanças de estado e fatores externos. Isso significa que o design pode reagir a entradas do usuário, como um endereço de e-mail inválido. Eles são abordados no módulo seletores, e este módulo mostrará mais detalhes sobre eles.
Ao contrário dos pseudoelementos, que você pode saber mais no módulo anterior, as pseudoclasses se conectam a estados específicos em que um elemento pode estar, em vez de estilizar partes dele.
Estados interativos
As pseudoclasses a seguir se aplicam devido a uma interação que um usuário tem com sua página.
:hover
Se um usuário tiver um dispositivo apontador, como um mouse ou trackpad,
e ele for colocado sobre um elemento,
você poderá se conectar a esse estado com
:hover para aplicar estilos.
Essa é uma maneira útil de sugerir que é possível interagir com um elemento.
:active
Esse estado é acionado quando há interação ativa com um elemento, como um clique, antes do clique ser liberado. Se um dispositivo apontador, como um mouse, for usado, esse estado será quando o clique for iniciado e ainda não tiver sido liberado.
:focus, :focus-within e :focus-visible
Se um elemento puder receber foco, como uma <button>,
é possível reagir a esse estado com a
pseudoclasse :focus.
Também é possível reagir se um elemento filho do elemento receber foco com
:focus-within.
Os elementos focalizáveis, como botões, mostrarão um anel de foco quando estiverem em foco, mesmo quando clicados. Nesse tipo de situação, um desenvolvedor aplica o seguinte CSS:
button:focus {
outline: none;
}
Esse CSS remove o anel de foco padrão do navegador quando um elemento recebe 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,
eles não poderão acompanhar onde o foco está atualmente ao usar a tecla Tab.
Com :focus-visible,
você pode apresentar um estilo de foco quando um elemento recebe foco pelo teclado,
além de usar a regra outline: none para evitar que um dispositivo 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>
Você pode 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 salto.
Estados históricos
:link
A pseudoclasse :link
pode ser aplicada a qualquer elemento <a> que tenha um valor href que ainda não tenha sido visitado.
:visited
É possível definir o estilo de um link que já foi visitado pelo usuário com a pseudoclasse :visited.
Este é o estado oposto a :link, mas você tem menos propriedades CSS para usar por motivos de segurança.
Você só pode definir o estilo color, background-color,
border-color, outline-color e a cor de fill e stroke do SVG.
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, é recomendável usar a regra da LVHA para estilizar links com pseudoclasses em uma ordem específica: :link, :visited, :hover, :active.
a:link {}
a:visited {}
a:hover {}
a:active {}
Estados de formulários
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 <button>, for desativado pelo navegador, será possível 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 alcançar essa pseudoclasse.
:checked e :indeterminate
A pseudoclasse :checked
está disponível quando um elemento de formulário de suporte,
como uma caixa de seleção ou um botão de opção, está em estado marcado.
O :checked é binário(verdadeiro ou falso),
mas as caixas de seleção têm um estado intermediário quando não estão marcadas nem desmarcadas.
Isso é conhecido como o
estado :indeterminate.
Um exemplo desse estado é quando há um controle "Selecionar tudo" que marca todas as caixas de seleção em um grupo. Se o usuário desmarcar uma dessas caixas de seleção, a caixa de seleção raiz não representará mais "todos" que está sendo marcada, então deve ser colocada em um estado indeterminado.
O elemento <progress> também tem um estado indeterminado que pode ser estilizado.
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 um placeholder,
esse estado não será mais aplicado.
Estados de validação
É possível responder à validação de formulário 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 que seja um campo válido.
Esse estado de valor válido pode ser mostrado ao usuário,
ajudando-o a entender que pode passar com segurança para o próximo campo.
A pseudoclasse :in-range estará disponível se uma entrada tiver min e 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
estará disponível para os campos obrigatórios.
Os campos que não são obrigatórios podem ser selecionados com a pseudoclasse :optional.
Como selecionar elementos pelo índice, ordem e ocorrência
Há um grupo de pseudoclasses que selecionam itens com base na localização 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 retornam o primeiro ou o último elemento de um grupo de elementos irmãos.
:only-child
Você também pode selecionar elementos sem irmãos,
com a
pseudoclasse :only-child.
:first-of-type e :last-of-type
Você pode selecionar
:first-of-type e
:last-of-type que, à primeira vista,
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 ficaria de cor vermelha 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;
}
Mesmo que o primeiro <div> seja o segundo filho,
ele ainda é o primeiro do tipo dentro do elemento .my-parent.
Portanto, com essa regra, ele ficará vermelho.
:nth-child e :nth-of-type
Você também não se limita ao primeiro, ao último filho e aos tipos.
As pseudoclasses :nth-child e
:nth-of-type
permitem especificar um elemento que está em um determinado índice.
A indexação nos seletores de 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 microssintaxe An+B.
li:nth-child(3n+3) {
background: yellow;
}
Esse seletor seleciona cada terceiro item,
a partir do item 3.
O n nessa expressão é o índice, que começa em zero, 3 (3n) é o quanto você multiplica esse índice.
Digamos que você tenha 7 itens <li>.
O primeiro item selecionado é 3, porque 3n+3 se traduz em (3 * 0) + 3.
A próxima iteração escolheria o item 6 porque n agora incrementou para 1,
então (3 * 1) + 3).
Essa expressão funciona para :nth-child e :nth-of-type.
Teste esse tipo de seletor no testador de enésimo filho ou nesta ferramenta de seleção de quantidade.
:only-of-type
Por fim, você pode encontrar o único elemento de um determinado tipo em um grupo de 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.
Encontrar elementos vazios
Às vezes, pode ser útil identificar elementos completamente vazios e também existe uma pseudoclasse para isso.
:empty
Se um elemento não tiver filhos, a
pseudoclasse :empty será aplicada a eles.
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 quando você está depurando o HTML a seguir e se perguntando por que ele não está funcionando com :empty:
<div>
</div>
O motivo é que há um espaço em branco entre a <div> de abertura e o fechamento,
então vazio não vai funcionar.
A pseudoclasse :empty pode ser útil quando você tem pouco controle sobre o HTML e quer ocultar elementos vazios,
como um editor de conteúdo WYSIWYG.
Aqui, um editor adicionou um parágrafo vago e vazio.
<article class="post">
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
<p></p>
<p>Curabitur blandit tempus porttitor.</p>
</article>
Com o :empty, é possível encontrar e ocultar essas informações.
.post :empty {
display: none;
}
Como encontrar e excluir vários elementos
Algumas pseudoclasses ajudam você a escrever CSS mais compacto.
:is()
Se você quiser encontrar todos os elementos filhos h2, li e img em um elemento .post,
crie uma lista de seletores como esta:
.post h2,
.post li,
.post img {
…
}
Com a pseudoclasse :is(), é possível criar uma versão mais compacta:
.post :is(h2, li, img) {
…
}
A pseudoclasse :is não é apenas mais compacta que uma lista de seletores, mas também é mais permissiva.
Na maioria dos casos, se houver um erro ou um seletor não compatível em uma lista de seletores, a lista inteira não funcionará mais.
Se houver um erro nos seletores transmitidos em uma pseudoclasse :is,
ele ignorará o seletor inválido, mas usará os válidos.
:not()
Você também pode excluir itens com a
pseudoclasse :not().
Por exemplo, você pode usá-lo para definir o estilo de 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 criar uma regra CSS que adicione um contorno vermelho espesso às imagens inválidas:
img:not([alt]) {
outline: 10px red;
}
Teste seu conhecimento
Testar seus conhecimentos sobre pseudoclasses
As pseudoclasses agem como se uma classe tivesse sido aplicada dinamicamente a um elemento, enquanto os pseudoelementos agem sobre o próprio elemento.
: único ou duplo como um caractere diferenciador-chave no seletorQuais das opções abaixo são uma pseudoclasse funcional?
:is():target() depois delas, para indicar que aceitam parâmetros.:empty() depois delas, para indicar que aceitam parâmetros.:not()Quais das pseudoclasses a seguir se devem a uma interação do usuário?
:hover:press:squeeze:target:focus-withinQuais das opções abaixo são pseudoclasses de estado <form>?
:enabled:fresh:indeterminate:checked:in-range:loading:valid