Pseudoclasses

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

Compatibilidade com navegadores

  • Chrome: 1.
  • Borda: 12.
  • Firefox: 1.
  • Safari: 2.

Origem

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

Compatibilidade com navegadores

  • Chrome: 1.
  • Borda: 12.
  • Firefox: 1.
  • Safari: 1.

Origem

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

Compatibilidade com navegadores

  • Chrome: 1.
  • Borda: 12.
  • Firefox: 1.
  • Safari: 1.

Origem

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

Compatibilidade com navegadores

  • Chrome: 1.
  • Borda: 12.
  • Firefox: 1.
  • Safari: 1.3

Origem

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

Compatibilidade com navegadores

  • Chrome: 1.
  • Borda: 12.
  • Firefox: 1.
  • Safari: 1.

Origem

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

Compatibilidade com navegadores

  • Chrome: 1.
  • Borda: 12.
  • Firefox: 1.
  • Safari: 3.1

Origem

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

Compatibilidade com navegadores

  • Chrome: 1.
  • Borda: 12.
  • Firefox: 1.
  • Safari: 3.1

Origem

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

Compatibilidade com navegadores

  • Chrome: 47.
  • Borda: 79.
  • Firefox: 51.
  • Safari: 9.

Origem

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

Compatibilidade com navegadores

  • Chrome: 10.
  • Borda: 12.
  • Firefox: 4.
  • Safari: 5.

Origem

É 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

Compatibilidade com navegadores

  • Chrome: 4.
  • Borda: 12.
  • Firefox: 3.
  • Safari: 3.1

Origem

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

Compatibilidade com navegadores

  • Chrome: 2.
  • Borda: 12.
  • Firefox: 1.5.
  • Safari: 3.1

Origem

Também é possível selecionar elementos sem irmãos, com o Pseudoclasse :only-child.

:first-of-type e :last-of-type

Compatibilidade com navegadores

  • Chrome: 1.
  • Borda: 12.
  • Firefox: 3.5.
  • Safari: 3.1

Origem

É 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

Compatibilidade com navegadores

  • Chrome: 1.
  • Borda: 12.
  • Firefox: 3.5.
  • Safari: 3.1

Origem

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

Compatibilidade com navegadores

  • Chrome: 1.
  • Borda: 12.
  • Firefox: 3.5.
  • Safari: 3.1

Origem

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

Compatibilidade com navegadores

  • Chrome: 1.
  • Borda: 12.
  • Firefox: 1.
  • Safari: 3.1

Origem

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()

Compatibilidade com navegadores

  • Chrome: 88.
  • Borda: 88.
  • Firefox: 78.
  • Safari: 14

Origem

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()

Compatibilidade com navegadores

  • Chrome: 1.
  • Borda: 12.
  • Firefox: 1.
  • Safari: 3.1

Origem

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.

Verdadeiro
Verifique o uso de uma : única ou dupla como um caractere distinto de chave no seletor.
Falso
Os pseudoelementos são para partes, e as pseudoclasses são para estado.

Quais das alternativas a seguir são uma pseudoclasse funcional?

:is()
🎉
:target
As pseudoclasses funcionais têm () após elas, para indicar que aceitam parâmetros.
:empty
As pseudoclasses funcionais têm () após elas, para indicar que aceitam parâmetros.
:not()
🎉

Quais das pseudoclasses a seguir são devidas a uma interação do usuário?

:hover
🎉
:press
Tente novamente.
:squeeze
Tente novamente.
:target
🎉
:focus-within
🎉

Quais das alternativas abaixo são pseudoclasses de estado <form>?

:enabled
🎉
:fresh
Tente novamente.
:indeterminate
🎉
:checked
🎉
:in-range
🎉
:loading
Tente novamente.
:valid
🎉