Podcast CSS - 015: Pseudoclasses
Digamos que você tenha
um formulário de inscrição de e-mail
e quiser que o campo do formulário de e-mail tenha uma borda vermelha caso contenha um endereço de e-mail inválido.
Como fazer isso?
É possível 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 seu design pode reagir à entrada do usuário, como um endereço de e-mail inválido. Isso é abordado no módulo seletores, e este módulo vai mostrar mais detalhes sobre eles.
Ao contrário dos pseudoelementos, sobre o qual você pode aprender mais no módulo anterior, pseudoclasses se conectam a estados específicos em que um elemento pode estar, em vez de estilizar partes desse elemento.
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 o colocam sobre um elemento,
é possível se conectar a esse estado
:hover
para aplicar estilos.
Essa é uma maneira útil de indicar que é possível interagir com um elemento.
:active
Esse estado é acionado quando há interação com um elemento. como um clique, antes que ele 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 pode receber foco, como uma <button>
,
é possível reagir a esse estado com as
Pseudoclasse :focus
.
Você também pode reagir se um elemento filho de seu elemento receber foco com
:focus-within
Elementos focalizáveis, como botões, mostrará um anel de foco quando o usuário estiver em foco, mesmo quando ele for clicado. Nesse tipo de situação, o desenvolvedor aplicará o seguinte CSS:
button:focus {
outline: none;
}
Esse CSS remove o anel de foco do navegador padrão quando um elemento recebe foco,
que apresenta um problema de acessibilidade para usuários que navegam em uma página da Web com um teclado.
Se não houver estilo de foco,
não conseguirá acompanhar a localização do foco atual ao usar a tecla Tab.
Com :focus-visible
você pode apresentar um estilo de foco quando um elemento recebe foco pelo teclado,
enquanto também usa 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
O :target
pseudoclasse 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ê poderá anexar estilos a esse elemento quando o URL contiver #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 "Pular".
Estados históricos
:link
O :link
pode ser aplicada a qualquer elemento <a>
que tenha um valor href
que ainda não tenha sido visitado.
:visited
Você pode estilizar um link que já foi acessado pelo usuário usando o
Pseudoclasse :visited
.
Esse é o estado oposto ao :link
, mas há menos propriedades CSS para usar
motivos de segurança.
Só é possível definir o estilo de color
, background-color
,
border-color
, outline-color
e a cor do SVG fill
e stroke
.
A ordem é importante
Se você definir um estilo :visited
,
ela pode ser substituída por uma pseudoclasse de link com especificidade pelo menos igual.
Por isso,
é recomendável usar a regra da LVHA para definir o estilo de links com pseudoclasses em uma ordem específica:
:link
, :visited
, :hover
e :active
.
a:link {}
a:visited {}
a:hover {}
a:active {}
Estados dos 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>
é desativado pelo navegador,
você pode se conectar a esse estado com o
Pseudoclasse :disabled
.
O :enabled
pseudoclasse 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 encontre essa pseudoclasse.
:checked
e :indeterminate
O :checked
pseudoclasse está disponível quando um elemento de formulário de suporte,
como uma caixa de seleção ou um botão de opção marcado.
O estado :checked
é um estado binário(verdadeiro ou falso),
mas as caixas de seleção terão um estado intermediário quando não estiverem marcadas nem desmarcadas.
Isso é conhecido como o
Estado :indeterminate
.
Um exemplo desse estado é quando você tem uma opção 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 representaria mais "todos" que está sendo verificado, Por isso, precisam ser colocados 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 o campo de um formulário tiver um atributo placeholder
e nenhum valor:
a :placeholder-shown
pode ser usada para anexar estilos a esse estado.
Assim que houver conteúdo no campo,
tendo um placeholder
ou não,
esse estado não se aplicará mais.
Estados de validação
É possível responder à validação do 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 tenha 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-os a entender que podem avançar 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 está dentro desses limites.
Com formulários HTML,
é possível determinar que um campo é obrigatório com o atributo required
.
O :required
pseudoclasse estará disponível nos campos obrigatórios.
Campos que não são obrigatórios podem ser selecionados com o
Pseudoclasse :optional
.
Seleção de elementos por í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 quiser encontrar o primeiro ou o último item,
é possível usar
:first-child
e
:last-child
Essas pseudoclasses retornarão o primeiro ou o último elemento de um grupo de elementos irmãos.
:only-child
Também é possível selecionar elementos sem irmãos,
com o
Pseudoclasse :only-child
.
:first-of-type
e :last-of-type
É possível selecionar
:first-of-type
e
: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 em 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
,
então, com esta regra, ela será de vermelho.
:nth-child
e :nth-of-type
Você não está limitado a primeiros e últimos filhos e tipos.
Os métodos :nth-child
e
:nth-of-type
As pseudoclasses 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 do que um índice a essas pseudoclasses.
Caso queira selecionar todos os elementos pares, use :nth-child(even)
.
Também é possível criar seletores mais complexos para encontrar itens em intervalos regularmente espaçados, usando a microsintaxe An+B.
li:nth-child(3n+3) {
background: yellow;
}
Esse seletor seleciona cada terceiro item,
começando no item 3.
O n
nessa expressão é o índice,
que começa em zero, o 3 (3n
) é o quanto você multiplica esse índice.
Digamos que você tem sete itens do atributo <li>
.
O primeiro item selecionado é 3 porque 3n+3
é traduzido como (3 * 0) + 3
.
A próxima iteração escolheria o item 6 porque n
agora foi incrementado para 1
.
então (3 * 1) + 3)
.
Essa expressão funciona para :nth-child
e :nth-of-type
.
Você pode testar esse tipo de seletor nth-child testador ou este ferramenta de seleção de quantidade.
:only-of-type
Por fim, é possível encontrar o único elemento de determinado tipo em um grupo de irmãos com
:only-of-type
Isso é útil se você deseja selecionar listas com apenas um item,
ou se quiser encontrar o único elemento em negrito em um parágrafo.
Como encontrar elementos vazios
Pode ser útil identificar elementos completamente vazios, e existe uma pseudoclasse para isso também.
:empty
Se um elemento não tiver filhos, o
A pseudoclasse :empty
se aplica a eles.
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á algum espaço em branco entre o <div>
de abertura e 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 vazio e inapropriado.
<article class="post">
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
<p></p>
<p>Curabitur blandit tempus porttitor.</p>
</article>
Com :empty
, é possível encontrar e ocultar essa informação.
.post :empty {
display: none;
}
Como encontrar e excluir vários elementos
Algumas pseudoclasses ajudam a escrever um CSS mais compacto.
:is()
Se você quiser encontrar todos os elementos filhos h2
, li
e img
em um elemento .post
,
você pode pensar em escrever uma lista de seletores como esta:
.post h2,
.post li,
.post img {
…
}
Com o :is()
pseudoclasse, é possível escrever uma versão mais compacta:
.post :is(h2, li, img) {
…
}
A pseudoclasse :is
não é apenas mais compacta do que uma lista de seletores, mas também é mais tolerante.
Na maioria dos casos,
se houver um erro ou um seletor não compatível em uma lista de seletores,
toda a lista de seletores não funcionará mais.
Se houver um erro nos seletores passados em uma pseudoclasse :is
,
ele ignora o seletor inválido, mas usa aqueles que são válidos.
:not()
Você também pode excluir itens com o
Pseudoclasse :not()
.
Por exemplo, ela pode ser usada 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, uma <img>
precisa ter um alt
, mesmo que seja um valor vazio,
Assim, você poderia escrever uma regra CSS que adiciona um contorno vermelho espesso a imagens inválidas:
img:not([alt]) {
outline: 10px red;
}
Teste seu conhecimento
Teste seu conhecimento sobre pseudoclasses
As pseudoclasses agem como se uma classe tivesse sido aplicada dinamicamente a um elemento, enquanto os pseudoelementos atuavam sobre um elemento em si.
Quais das alternativas a seguir são uma pseudoclasse funcional?
:target
:empty
:not()
:is()
Quais das pseudoclasses a seguir são devidas a uma interação do usuário?
:press
:target
:focus-within
:squeeze
:hover
Quais das alternativas abaixo são pseudoclasses de estado <form>
?
:in-range
:enabled
:fresh
:valid
:checked
:loading
:indeterminate