Guia definitivo das pseudoclasses e pseudoelementos das CSS

Introdução

Hola a todos! (Olá pessoal!) No início da minha carreira de desenvolvedor web eu tinha que aprender as coisas pelo árduo caminho de ensaio e erro. Não existiam os sites Smashing Magazine, Can I Use, CodePen e nem uma destas maravilhosas ferramentas que estão à nossa disposição nos dias atuais. Teria sido incrível se eu tivesse alguém para me apontar os caminhos do aprendizado do desenvolvimento web especialmente para as CSS.

Hoje, que eu já me sinto mais experiente eu gostaria de compartilhar com vocês de uma maneira amigável, casual e não dogmática um guia de referência para as pseudoclasses e pseudoelementos das CSS.

Se você é um designer ou desenvolvedor experiente é muito provável que já conheça e tenha usado as pseudoclasses e os pseudoelementos aqui estudados, mas mesmo assim eu convido você a dar uma olhada no índice desta página, pois acredito que você não conheça pelo menos um ou dois dos pseudoelementos e/ou pseudoclasses aqui tratadas.

Antes de "mergulhar fundo" no assunto vejamos um conceito básico pertinente: Você sabe sabe o que significa o termo "pseudo"? Consulte: Dicionário online de português:

prefixo: pseudo
1. De teor falso; cujo conteúdo não corresponde à realidade.

Sem entrar em considerações mais avançadas com a definição técnica do W3C, pseudoclasses e pseudoelementos representam um espécie de estado "fantasma" ou uma caracterização específica de um elemento que pode ser estilizado. Algumas pseudoclasses mais conhecidas são: :link, :visited, :hover, :active, :first-child e :nth-child. Existem outras e nós iremos estudá-las a seguir.

Pseudoclasses têm sua sintaxe iniciada pelo sinal de dois pontos (:) seguida pelo nome da pseudoclasse e em alguns casos por um valor escrito entre parênteses.

Pseudoelementos são como elementos virtuais que podem ser tratados como elementos regulares da marcação HTML. Contudo, eles não existem na árvore do documento (no DOM) pois são criados com uso de CSS.

Alguns pseudoelementos mais conhecidos são: :after, :before e :first-letter. Serão estudados neste artigo.

Dois pontos simples ou dobrados?

A resposta curta é: na maioria dos casos é indiferente.

A sintaxe com dois pontos dobrados (::) foi criada pelas CSS3 para estabelecer uma diferenciação entre pseudoelementos, tais como, ::before e ::after e pseudoclasses, tais como, :hover e :active. Todos os navegadores, exceto os IE8 e anteriores, oferecem suporte para dois pontos dobrados na sintaxe para pseudoelementos.

Alguns pseudoelementos, tal como, ::backdrop admitem apenas a sintaxe com dois pontos dobrados.

Eu prefiro a sintaxe com dois pontos simples, para fazer com que meu CSS seja compatível com navegadores antigos. Uso sintaxe com dois pontos dobrados para os pseudoelementos que exigem esta sintaxe e não admitem sintaxe com dois pontos simples.

Você pode usar qualquer uma das sintaxes, pois, neste casos, não existe uma maneira certa ou errada.

É bom ressaltar que a especificação, na data em que este artigo foi escrito, recomenda a sintaxe com dois pontos simples pela razão já citada de compatibilidade com navegadores antigos (retrocompatibilidade):

Notar que a nova maneira CSS3 de escrever CSS preconiza o uso de dois pontos dobrados na sintaxe para pseudoelementos, por exemplo: a::after { … }, cuja finalidade é a de estabelecer diferenciação com as pseudoclasses. Você vai encontrar esta sintaxe nas CSS. Contudo as CSS3 preveem também a sintaxe com uso de dois pontos simples para os pseudoelementos, por razões de retrocompatibilidade. Assim, nós recomendamos que você, pelo menos por enquanto, adote a sintaxe com dois pontos simples.

Nos títulos deste artigo os pseudoelementos que admitem as duas sintaxes serão grafados com as duas sintaxes. Aqueles que admitem somente a sintaxe com dois pontos dobrados serão grafados somente com ela.

Quando (não) usar conteúdo gerado

Gerar, ou criar, conteúdo com CSS é possível com a declaração da propriedade content para os pseudoelementos :before ou :after.

O valor de "content" pode ser tanto texto puro como um container a ser manipulado com CSS para mostrar um gráfico, uma forma ou um elemento decorativo. Neste exemplo o conteúdo criado foi do tipo texto.

Não se deve criar conteúdos textuais com CSS que sejam relevantes para o entendimento do documento pelas seguintes razões:

• Eles não são acessíveis a todos os leitores de tela.
• Eles não são selecionáveis.
• Se o conteúdo criado for irrelevante, apenas com fins decorativos, os leitores de tela que os suportam, lerão o conteúdo, interferindo de forma inconveniente na experiência do usuário.

Conteúdo criado com CSS deve ser para fins decorativos e informação não trivial, mas mesmo assim certifique-se que serão convenientemente tratados por tecnologias assistivas de modo a não distrair seus usuários. Pense em "progressive enhancement" quando decidir usar conteúdos criados com CSS.

No site Smashing Magazine, Gabriele Romanato escreveu um artigo interessante sobre o uso de conteúdos criados com CSS (em inglês).

Pseudoclasses e pseudoelementos experimentais

Pseudoclasses e pseudoelementos experimentais são aqueles previstos nas especificações, mas que ainda não atingiram o estágio de estáveis ou finalizados. A sintaxe e comportamento de tais funcionalidades podem ser alteradas ao longo da evolução das especificações.

Mas, já é possível fazer experiências com as pseudoclasses e pseudoelementos experimentais valendo-se do uso de prefixos proprietários. Para informações a respeito consulte Can I Use e também algumas ferramenta para autoprefixação, tais como, -prefix-free or Autoprefixer

Neste artigo foi colocado o rótulo "experimental" ao lado do nome das pseudoclasses e pseudoelementos que se encontram nesta condição.

OK galera, o show vai começar!

Pseudoclasses

Nossa discussão começa com os estados das pseudoclasses.

Estados

Um estado da pseudoclasse acontece quando o usuário desencadeia uma ação. Uma "ação" em CSS pode ser também uma "não ação" como no caso de um link que ainda não tenha sido visitado.

Vamos a elas.

:link

A pseudoclasse :link o estado "normal" dos links que ainda não tenham sido visitados. Recomenda-se que a pseudoclasse :link seja a primeira a ser declarada entre todas aquelas destinadas a estilizar os estados dos links. A ordem de declaração dos quatro estados é: :link, :visited, :hover, :active

a:link { color: orange; }

A pseudoclasse pode ser omitida como mostrado a seguir:

a { color: orange; }

Índice ⇧

:visited

A pseudoclasse :visited é usada para estilizar links visitados e deve ser a segunda a ser declarada (depois da pseudoclasse :link).

a:visited { color: blue; }

Índice ⇧

:hover

A pseudoclasse :hover é usada para estilizar links no momento em que o usuário coloca o dispositivo apontador sobre um elemento. Essa pseudoclasse não é exclusiva para links embora seja seu uso mais comum.

Deve ser a terceira a ser declarada (depois da pseudoclasse :visited).

a:hover { color: orange; }

Demonstração:

Ver pen CSS :hover pseudo-class por Ricardo Zea (@ricardozea) no CodePen.

Índice ⇧

:active

A pseudoclasse :active é usada para estilizar um elemento no momento em que o usuário o torna "ativo" quer com uso de um dispositivo apontador que tocando-o em um dispositivo do tipo touchscreen. Pode-se ativá-lo também com uso do teclado tal como se faz com a pseudoclasse :focus.

Seu comportamento e semelhante ao de :focus, com a diferença que :active é um evento que ocorre entre o apertar e soltar no clique do mouse.

Deve ser a quarta a ser declarada (depois da pseudoclasse :hover).

divS

a:active { color: rebeccapurple; }

Índice ⇧

:focus

A pseudoclasse:focus é usada para estilizar um elemento que ganha o foco quer com uso de um dispositivo apontador que tocando-o em um dispositivo do tipo touchscreen, que pelo teclado. É muito usado em campos de formulário.

a:focus { color: green; }

Ou:

input:focus { background: #eee; }

Índice ⇧

Bônus: Sass Mixin para links

Se você usa pré-processadores CSS, tal como Sass, este bônus poderá ser do seu interesse.

(Se você não usa pré-processadores — e não há nada contra isso — sinta-se à vontade para ir direto a pseudoclasses estruturais

O mixin Sass mostrado a seguir tem por finalidade otimizar o fluxo de trabalho criando um conjunto de regras CSS para os links.

A ideia ao criar o mixin foi a de não declarar argumentos default. Assim, seremos "forçados" a declarar explicitamente os quatro estados dos links.

As pseudoclasses :focus e :active em geral são declaradas em conjunto. Sinta-se à vontade para separá-las se você assim preferir.

Covém notar que o mixin sugerido poderá ser aplicado a qualquer elemento da marcação HTML e não somente aos links.

Eis o mixin:

@mixin links ($link, $visited, $hover, $active) {
    & {
        color: $link;
        &:visited {
            color: $visited;
        }
        &:hover {
            color: $hover;
        }
        &:active, &:focus {
            color: $active;
        }
    }
}

Uso:

a {
    @include links(orange, blue, yellow, teal);
}

Compilado resulta em:

a {
  color: orange;
}
a:visited {
  color: blue;
}
a:hover {
  color: yellow;
}
a:active, a:focus {
  color: teal;
}

Demonstração:

Ver pen Sass Mixin for Links por Ricardo Zea(@ricardozea

Índice ⇧

Pseudoclasses estruturais

Pseudoclasses estruturais casam com porções da árvore do documento (ou DOM) que não podem ser casadas com uso de outros tipos de seletores ou elementos de combinação de seletores.

:first-child

A pseudoclasse :first-child casa com o elemento primeiro filho de seu elemento pai.

No exemplo a seguir somente o primeiro elemento li será com texto na cor laranja (orange).

<ul>
    <li>Este texto será na cor laranja.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

li:first-child { color: orange; }

Índice ⇧

:first-of-type

A pseudoclasse :first-of-type casa com o primeiro elemento de um determinado tipo que seja filho de seu elemento pai.

No exemplo a seguir o primeiro elemento li e o primeiro elemento span serão com texto na cor laranja (orange).

<ul>
    <li>Este texto será na cor laranja.</li>
    <li>Lorem ipsum dolor sit amet.<span>Este texto será na cor laranja.</span></li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

ul :first-of-type { color: orange; }

Índice ⇧

:last-child

A pseudoclasse :last-child casa com o elemento último filho de seu elemento pai.

No exemplo a seguir o último elemento li será com texto na cor laranja (orange).

<ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Este texto será na cor laranja.</li>
</ul>

li:last-child { color: orange; }

Índice ⇧

:last-of-type

A pseudoclasse :last-of-type casa com o último elemento de um determinado tipo que seja filho de seu elemento pai.

No exemplo a seguir o último elemento li e o último elemento span serão com texto na cor laranja (orange).

<ul>
    <li>Lorem ipsum dolor sit amet. <span>Lorem ipsum dolor sit amet.</span>
    <span>Este texto será na cor laranja.</span></li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Este texto será na cor laranja.</li>>
</ul>

ul :last-of-type { color: orange; }

Índice ⇧

:not

A pseudoclasse :not é também conhecida como pseudoclasse de negação. Ela aceita um argumento — basicamente um outro "selector" — escrito entre sinais de parênteses. O argumento poderá ser, também, uma pseudoclasse.

O argumento pode ser encadeado, mas não pode conter outro seletor :not.

No exemplo a seguir a pseudoclasse :not casa elementos que não constam do argumento. Todos os textos serão na cor laranja exceto o do elemento li cuja classe é .first-item

<ul>
    <li class="first-item">Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

li:not(.first-item) { color: orange; }

No exemplo mostrado a seguir encadeamos duas pseudoclasses :not. Todos os elementos terão uma cor de fundo amarela (yellow) e a cor do texto preta (black) exceto o elemento li cuja classe é .first-item e o último elemento li da lista:

li:not(.first-item):not(:last-of-type) {
    background: yellow;
    color: black;
}

Demonstração:

Ver pen CSS :not pseudo-class por Ricardo Zea (@ricardozea) no CodePen.

Índice ⇧

:nth-child

A pseudoclasse :nth-child casa com um ou mais elementos dependendo da ordem em eles aparecem na marcação HTML.

Esta pseudoclasse é uma das mais versáteis e robustas das CSS.

A pseudoclasse :nth admite um argumento que consiste em uma fórmula a ser inserida entre parênteses. A fórmula poderá ser um simples número inteiro, algo do tipo an+b ou as palavras chaves odd ou even.

A fórmula an+b:

• a letra a é um número inteiro;
• a letra n é o literal n (ou seja, a própria letra n);
• o sinal + é o operador matemático que pode ser soma (+) ou subtração (-);
• a letra b é um número inteiro que deverá estar presente na fórmula somente se for usado o operador matemático.

Usando o alfabeto grego de acordo com a estrutura HTML mostrada a seguir:

<ol>
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
    <li>Delta</li>
    <li>Epsilon</li>
    <li>Zeta</li>
    <li>Eta</li>
    <li>Theta</li>
    <li>Iota</li>
    <li>Kappa</li>
</ol>

Vamos estilizar na cor laranja (orange) o segundo filho, ou seja a palavra "Beta" será estilizada.

ol :nth-child(2) { color: orange; }

Vamos estilizar na cor laranja (orange) os elementos filhos, de dois em dois a partir do segundo, ou seja, as palavras "Beta", "Delta", "Zeta", "Theta" e "Kappa" serão estilizadas.

ol :nth-child(2n) { color: orange; }

Vamos estilizar na cor laranja (orange) todos os elementos filhos que ocupam a posição par na lista

ol :nth-child(even) { color: orange; }

Vamos estilizar na cor laranja (orange) todos os elementos filhos a partir do sexto, ou seja, as palavras "Zeta", "Theta" e "Kappa" serão estilizadas.

ol :nth-child(2n+6) { color: orange; }

Demonstração:

Ver pen CSS :nth-child pseudo-class por Ricardo Zea (@ricardozea) no CodePen.

Índice ⇧

:nth-last-child

A pseudoclasse :nth-last-child é idêntica à pseudoclasse :nth-child exceto que o casamento se dá contando-se os elementos filhos de trás para frente.

Vamos estilizar na cor laranja (orange) o segundo elemento filho contando-se de trás para frente, ou seja, a palavra " "Iota" será estilizada.

ol :nth-last-child(2) { color: orange; }

Vamos estilizar na cor laranja (orange) os elementos filhos, de dois em dois a partir do segundo contado de trás para frente, ou seja, as palavras "Iota," "Eta," "Epsilon," "Gamma" e "Alpha" serão estilizadas.

ol:nth-last-child(2n) { color: orange; }

Vamos estilizar na cor laranja (orange) todos os elementos filhos que ocupam a posição par na lista, contando-se de trás para frente:

ol:nth-last-child(even) { color: orange; }

Vamos estilizar na cor laranja (orange) todos os elementos filhos a partir do sexto contando-se de trás para frente, ou seja, as palavras "Epsilon", "Gamma" e "Alpha" serão estilizadas:

ol:nth-last-child(2n+6) { color: orange; }

Índice ⇧

:nth-of-type

A pseudoclasse :nth-of-type é idêntica à pseudoclasse :nth-child, a principal diferença é que se trata de um seletor mais específico, pois casa com elementos filhos de determinado tipo.

No exemplo a seguir todos os segundos parágrafos contidos em qualquer elemento pai serão estilizados na cor laranja (orange).

<article>
    <h1>Aqui vai um cabeçalho</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <a href=""><img src="images/rwd.png" alt="Dominando RWD"></a>
    <p>Este texto será na cor laranja.</p>
</article>

p:nth-of-type(2) { color: orange; }

Índice ⇧

:nth-last-of-type

A pseudoclasse :nth-last-of-type é idêntica à pseudoclasse :nth-of-type exceto que o casamento se dá contando-se os elementos filhos de trás para frente.

No exemplo a seguir, como o casamento de dá de trás para frente, todos os primeiros parágrafos serão estilizados na cor laranja (orange).

<article>
    <h1>Aqui vai um cabeçalho</h1>
    </p>Este texto será na cor laranja.</p>
    </a href="#"><img src="images/rwd.png" alt="Mastering RWD"></a>
    </p>Lorem ipsum dolor sit amet.</p>
</article>

p:nth-last-of-type(2) { color: orange; }

Consulta

Para entender o funcionamento da pseudoclasse :nth visite as seguintes interfaces:

• "CSS3 Structural Pseudo-Class Selector Tester," Lea Verou
• ":nth Tester," CSS-Tricks

Índice ⇧

:only-child

A pseudoclasse :only-child casa com o filho único de um elemento.

No exemplo a seguir o primeiro elemento ul tem um único elemento filho cujo texto será estilizado na cor laranja (orange). O segundo elemento ul tem vários elementos filho e neste caso nenhum deles será estilizado quando se usa a pseudoclasse :only-child.

<ul>
    <li>Este texto será na cor laranja.</li>
</ul>

<ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

ul :only-child { color: orange; }

Índice ⇧

:only-of-type

A pseudoclasse :only-of-type casa com elementos que não têm irmãos do seu tipo. Ele é idêntico ao elemento :only-child exceto pelo fato de que casa com um determinado tipo de elemento o que faz com que o seletor seja mais específico.

No exemplo a seguir o primeiro elemento ul tem apenas um elemento do tipo li que será estilizado na cor laranja (orange).

<ul>
    <li>Este texto será na cor laranja.</li>
</ul>

<ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

li:only-of-type { color: orange; }

Índice ⇧

:target

A pseudoclasse :target casa com o elemento ao qual foi definido um atributo ID (único).

No exemplo a seguir o artigo com o ID igual a target será estilizado na cor amarela (yellow) quando o URL no navegador terminar com #target.

URL:

https://awesomebook.com/#target

<article id="target">
    <h1><code>:target</code> pseudo-class</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</p>
</article>

:target { background: yellow; }

Dica: Você pode usar a sintaxe simplificada background: no lugar de background-color: para obter o mesmo resultado.

Índice ⇧

Validação

Formulários são uma funcionalidade do desenvolvimento web que normalmente requerem cuidados especiais com relação a experiência do usuário. O uso de pseudoclasses poderá ser um poderoso aliado do desenvolvedor na validação, fazendo o processo de preenchimento de campos uma experiência bem melhor para o usuário.

Convém notar que a maioria das pseudoclasses que estudaremos a seguir além de serem úteis para validação de campos de formulários podem também serem usadas com outros elementos da marcação HTML.

Vejamos a seguir estas pseudoclasses!

:checked

A pseudoclasse :checked casa com radio buttons, checkboxes e elementos option que tenham sido marcados ou selecionados.

No exemplo a seguir quando o checkbox for selecionado o seu rótulo será estilizado de forma diferenciada melhorando a experiência do usuário

Demonstração:

Ver pen CSS :checked pseudo-class por Ricardo Zea (@ricardozea) no CodePen.

Índice ⇧

:default

A pseudoclasse :default casa com o elemento default de um formulário entre um grupo de elementos similares.

Se você precisar estilizar um botão default de um formulário ao qual não tenha sido definido um atributo classe use a pseudoclasse :default.

Notar que o uso de botão do tipo "Reset" ou "Clear" em um formulário pode acarretar sérios problemas de usabilidade. Evite usá-lo a menos que seja absolutamente necessário. Os artigos a seguir explicam a razão para o não uso deste tipo de botão:

• "Reset and Cancel Buttons," Nielsen Norman Group (2000)
• "Killing the Cancel Button on Forms for Good," UX Movement (2010)

Demonstração:

Ver pen CSS :default pseudo-class por Ricardo Zea (@ricardozea) no CodePen.

Índice ⇧

:disabled

A pseudoclasse :disabled casa com elementos de formulário que tenham sido desabilitados. Elementos desabilitados não podem ser selecionados, marcados, ativados e nem ganhar foco.

No exemplo a seguir o elemento input para campo name foi desabilitado e será estilizado com transparência igual a 50%.

<input type="text" id="name" disabled>

:disabled { opacity: .5; }

Dica: Usar disabled="disabled" na marcação HTML não é necessário. Você pode obter o efeito usando simplesmente disabled. Lembre-se que o uso de disabled="disabled" é obrigatório somente em marcação XHTML.

Demonstração:

Ver pen CSS :disabled pseudo-class por Ricardo Zea (@ricardozea) no CodePen.

Índice ⇧

:empty

A pseudoclasse :empty casa com elementos que não têm qualquer tipo de conteúdo, ou seja, vazios. Se um elemento contiver uma simples letra, outro elemento HTML ou atá mesmo um espaço em branco ele não será um elemento empty (vazio).

A seguir observe a definição e exemplos do que é considerado vazio ou não:

• Empty (vazio)
  Nenhum conteúdo ou caractere deve existir dentro do elemento. Um comentário HTML não é considerado conteúdo nestes casos.
• Not empty (não vazio)
  Existe conteúdo ou caracteres dentro do elemento. Até mesmo espaços em branco são considerados conteúdos.

No exemplo mostrado a seguir:

• o primeiro container contém texto, assim, será estilizado com fundo laranja (orange);
• o segundo container contém um espaço em branco, assim também será estilizado com fundo laranja (orange);
• o terceiro container nada contém (está vazio), assim, será estilizado com fundo amarelo (yellow);
• o último container contém um comentário HTML (está vazio também), assim também será estilizado com fundo amarelo (yellow).

<div>Este box será na cor laranja (orange)</div>
<div> </div>
<div></div>
<div><!-- Este comentário não é considerado conteúdo --></div>

div {
  background: orange;
  height: 30px;
  width: 200px;
}

div:empty {
  background: yellow;
}

Demonstração:

Ver pen CSS :empty pseudo-class por Ricardo Zea (@ricardozea) no CodePen.

Índice ⇧

:enabled

A pseudoclasse :enabled casa com elementos que estão habilitados. Todos os elementos de formulário estão habilitados por padrão — exceto se definirmos, para o elemento o atributo disabled na marcação HTML.

Pode-se usar uma combinação de :enabled e :disabled para fornecer feedback, melhorando assim a experiência do usuário.

No exemplo a seguir depois de ter sido desabilitado o campo name será habilitado e estilizado com opacidade 1 e acrescida uma borda verde (green) de 1px:

:enabled {
    opacity: 1;
    border: 1px solid green;
}

Dica: Usar enabled="enabled" na marcação HTML não é necessário. Você pode obter o efeito usando simplesmente enabled. Lembre-se que o uso de enabled="enabled" é obrigatório somente em marcação XHTML.

Demonstração:

Ver pen CSS :enabled pseudo-class por Ricardo Zea (@ricardozea) no CodePen.

Índice ⇧

:in-range

A pseudoclasse :in-range casa com elementos que definem uma faixa de valores e cujos valores estejam dentro da faixa especificada.

No exemplo a seguir o elemento input define uma faixa de valores entre 5 e 10. Valores dentro desta faixa serão estilizados com uma borda verde (green).

<input type="number" min="5" max="10">

input[type=number] {
    border: 5px solid orange;
}

input[type=number]:in-range {
    border: 5px solid green;
}

:out-of-range

A pseudoclasse :out-of-range casa com elementos que definem uma faixa de valores e cujos valores estejam fora da faixa especificada.

No exemplo a seguir o elemento input define uma faixa de valores entre 1 e 12. Valores fora desta faixa serão estilizados com uma borda verde (green).

<input id="months" name="months" type="number" min="1" max="12">

input[type=number]:out-of-range {
    border: 1px solid orange;
}

Demonstração:

Ver pen CSS :in-range and :out-of-range pseudoclasses por Ricardo Zea (@ricardozea) no CodePen.

Índice ⇧

:indeterminate

A pseudoclasse :indeterminate casa com elementos input do tipo radio buttons e check boxes que foram desmarcados pelo usuário ou que foram carregados na página sem estarem marcados.

Um exemplo é quando uma página contendo um grupo de radio buttons é carregada sem que nenhum deles tenha sido marcado por padrão, ou ainda quando a um checkbox é definido o estado indeterminate via JavaScript.

<ul>
    <li>
        <input type="radio" name="list" id="option1">
        <label for="option1">Option 1</label>
    </li>
    <li>
        <input type="radio" name="list" id="option2">
        <label for="option2">Option 2</label>
    </li>
    <li>
        <input type="radio" name="list" id="option3">
        <label for="option3">Option 3</label>
    </li>
</ul>

:indeterminate + label {
    background: orange;
}

Demonstração:

Ver pen CSS :indeterminate pseudo-class por Ricardo Zea (@ricardozea) no CodePen.

Índice ⇧

:valid

A pseudoclasse :valid casa com campos de formulário cujos dados de entrada estejam de acordo com o formato requerido para o campo.

No exemplo a seguir o campo email foi preenchido com um endereço de e-mail que está de acordo com a estrutura de um e-mail e neste caso, sendo o e-mail válido, o campo será estilizado com uma borda de 1px na cor verde (green):

input[type=email]:valid {
    border: 1px solid green;
}

:invalid

A pseudoclasse :invalid casa com campos de formulário cujos dados de entrada estejam em desacordo com o formato requerido para o campo.

No exemplo a seguir quando o campo email contém um endereço de e-mail inválido e assim o campo será estilizado com uma borda de 1px na cor laranja (orange):

input[type=email]:invalid {
    background: orange;
}

Demonstração:

Ver pen CSS :valid and :invalid pseudoclasses por Ricardo Zea (@ricardozea) no CodePen.

Índice ⇧

:optional

A pseudoclasse :optional casa com campos do tipo input que não são de preenchimento obrigatório. Ou seja, campos que não contêm o atributo required são os alvos da pseudoclasse :optional.

No exemplo a seguir o campo é opcional. Ele não contém o atributo required e será estilizado na cor cinza (gray).

<input type="number">

:optional { color: gray; }

Índice ⇧

:read-only

A pseudoclasse :read-only casa com elementos que não podem ser editados pelo usuário. É idêntica à pseudoclasse :disabled e o atributo que foi definido na marcação HTML é quem determina qual pseudoclasse usar.

Isso é útil em em um campo de formulário no qual o desenvolvedor pretende mostra um conteúdo já preenchido e que não deva ser alterado pelo usuário, mas que precisa ser mostrado no formulário e será enviado para processamento.

No exemplo a seguir o elemento input foi marcado com o atributo readonly. Assim, ele poderá ser estilizado com a pseudoclasse :read-only é terá seu texto na cor cinza (gray).

<input type="text" value="I am read only" readonly>

input:read-only { color: gray; }

Demonstração:

Ver pen CSS :read-only pseudo-class por Ricardo Zea (@ricardozea) no CodePen.

Índice ⇧

:read-write

A pseudoclasse :read-write casa com elementos que podem ser editados pelo usuário. Casa também com elmentos aos quais foi definido o atributo contenteditable na marcação HTML.

Esta pseudoclasse pode ser combinada com a pseudoclasse :focus, em determinadas situações, para melhorar a experiência do usuário.

No exemplo a seguir o usuário será capaz de editar o texto contido no elemento DIV simplesmente clicando nele. Estilizar de maneira diferenciada uma área contendo textos editáveis é bom para aumentar a experiência do usuário, por fornece uma dica de que ali há algo editável.

<div class="editable" contenteditable>
    <h1>Clique este texto para editá-lo</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</p>
</div>

:read-write:focus {
    padding: 5px;
    border: 1px dotted black;
}

Demonstração:

Ver pen CSS :read-write pseudo-class por Ricardo Zea (@ricardozea) no CodePen.

Índice ⇧

:required

A pseudoclasse :required casa com elementos input aos quais foi definido o atributo required na marcação HTML.

A prática de colocar um sinal asterísco (*) oao lado de um campo de preenchimento obrigatório pode ser complementada com estilização diferenciada do campo com uso desta pseudoclasse. Estamos assim, aproveitando o máximo dos dois mundos, HTML e CSS.

No exemplo a seguir o campo input foi marcado com o atributo required da HTML. Podemos melhorar a experiência do usuário estilizando de forma a que seja oferecida mais uma dica de que o campo é obrigatório.

<input type="email" required>

:required {
    color: black;
    font-weight: bold;
}

Demonstração:

Ver pen CSS :required pseudo-class por Ricardo Zea (@ricardozea) no CodePen.

Índice ⇧

:scope (experimental)

A pseudoclasse :scope só faz sentido quando usada em conjunto com o atributo scoped da HTML definido para a tag style.

Se não for definido o atributo scoped na tag style em uma seção da página a pseudoclasse :scope transversa todo o documento até o elemento raiz html que é o escopo default das folhas de estilos.

No exemplo a seguir ao bloco de marcação HTML foi atribuida uma folha de estilos scoped assim, todo o texto no segundo elemento section será estilizado em itálico.

<article>
  <section>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet.</p>
  </section>
  <section>
    <style scoped>
      :scope {
        font-style: italic;
      }
    </style>
  <h1>Este texto será itálico.</h1>
  <p>Este texto será itálico.</p>
  </section>
</article>

Demonstração:

Ver pen CSS :scope pseudo-class por Ricardo Zea (@ricardozea) no CodePen.

Idioma

Pseudoclasses para idiomas casam exclusivamente com textos. Elas não têm como alvo mídias, tais como vídeoo e áudio.

:dir (experimental)

A pseudoclasse :dir casa com elementos aos quais foi definida a direção no documento com uso do atributo dir da HTML.

Atualmente é possível definir duas direções: ltr (da esquerda para a direita) e rtl (da direita para a esquerda).

Na data em que este artigo foi escrito somente o navegador Firefox (com uso do prefixo proprietário -moz-dir() ) suporta a pseudoclasse :dir. Esta situação deve evoluir no futuro e o exemplo a seguir mostra o uso da versões do seletor com e sem o prefixo.

Nota: Declarar as duas versões do seletor em uma só regra CSS não funciona. É necessário separar as declarações em regras distintas.

No exemplo a seguir o parágrafo foi escrito em árabe (usa a direção do texto da direita para a esquerda), assim o texto será estilizado na cor laranja (orange).

<article dir="rtl">
    <p>التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل.</p>
</article>

/* com prefixo */
article :-moz-dir(rtl) {
    color: orange;
}

/* sem prefixo */
article :dir(rtl) {
    color: orange;
}

No exemplo a seguir o parágrafo foi escrito em inglês (usa a direção do texto da esquerda para a direita), assim o texto será estilizado na cor azul (blue).

<article dir="ltr">
    <p>Se você conhece HTML e CSS e tem noções dos princípios de desenvolvimento responsivo então este livro foi escrito para você.</p>
</article>

/* prefixed */
article :-moz-dir(ltr) {
    color: blue;
}

/* unprefixed */
article :dir(ltr) {
    color: blue;
}

Demonstração:

Ver pen CSS :dir pseudo-class por Ricardo Zea (@ricardozea) no CodePen.

Índice ⇧

:lang

A pseudoclasse :lang casa elementos aos quais tenha sido definido o atributo lang="" da HTML, com elementos cujo idioma tenha sido definido com uso de meta elementos ou com protocolos, tal como, cabeçalhos HTTP.

o atributo lang="" da HTML em geral é definido para a tag html, mas pode ser definido para qualquer elmento da marcação, conforme necessário.

Convém notar que é prática comum usar sinais de aspas (quotation marks) para marcar idiomas, definindo-se a propriedade CSSquotes. Contudo a maioria dos agentes de usuário (UA), incluídos aí os IE 9+, são capazes de adicionar nativamente as aspas, caso elas não tenham sido declaradas nas CSS.

Dependendo das circunstâncias isso pode ou não ser conveniente, pois existem diferenças entre as aspas inseridas nativamente pelo navegador e aquelas que você é capaz de criar com uso de CSS.

Por examplo: quotation marks criadas nativamente para o alemão (de) são conforme mostradas a seguir:

Lorem ipsum dolor sit amet.

Por outro lado em muitas páginas alemãs encontradas na web quotations marks criafdas com CSS têm o aspecto conforme mostrado a seguir:

Lorem ipsum dolor sit amet.

Ambas estão corretas. Cabe a você a decisão de deixar a cargo do navegador ou estilizar as aspas usando a pseudoclasse :lang e a propriedade CSS quotes.

Obsetrve a seguir um exemplo de aspas com CSS.

<article lang="en">
    <q>Lorem ipsum dolor sit amet.</q>
</article>
<article lang="fr">
    <q>Lorem ipsum dolor sit amet.</q>
</article>
<article lang="de">
    <q>Lorem ipsum dolor sit amet.</q>
</article>

:lang(en) q { quotes: '"' '"'; }
:lang(fr) q { quotes: '«' '»'; }
:lang(de) q { quotes: '»' '«'; }

Demonstração:

Ver pen CSS :lang pseudo-class por Ricardo Zea (@ricardozea) no CodePen.

Índice ⇧

Miscelânea

A seguir vamos explorar o uso de pseudoclasses com outras funcões.

:root

A pseudoclasse :root casa com o elemento pai mais alto (raiz) em um documento.

Virtualmente em todos os casos a pseudoclasse :root casa com o elemento html quando se trata de um docemento HTML. Em outras linguagens de marcação de documentos, tais como XML e SVG, esta classe casa com outros elementos .

Vamos definir uma cor de fundo para o elemento html que é o elemento pai mais alto (raiz) de um documento HTML:

:root { background: orange; }

Nota: É possível obter o mesmo efeito usando o seletor html. Contudo :root, tal como se fora uma classe, tem especificidade mais alta que um seletor tipo (no caso o seletor html).

Índice ⇧

:fullscreen (experimental)

A pseudoclasse :fullscreen casa com elementos que são renderizados em modo tela cheia.

Mas, não se destina a ser usado para as ocasiões em que o usuário pressiona a tecla F11. Ela foi criada para ser usada com a API JavaScript Fullscreen que foi criada para possibilitar a apresentação de imagens, videos e jogos inseridos em um container e renderizados em modo tela cheia.

Ao se entrar em modo tela cheia em um navegador é apresentada uma mensagem no topo do navegador informando a entrada e instruindo o usuário a teclar Escape para sair do modo tela cheia. Este comportamento por ser observado quando maximizamos um vídeo do YouTube ou Vimeo.

Se você pretende usar a pseudoclasse :fullscreen esteja ciente que os navegadores estilizam de maneira diferente. Ademais você terá que lidar com prefixos proprietários não so nas CSS como na JavaScript. Eu recomendo usar o script de Hernan Rajchert’s screenfull.js que trata de modo consistente as diferenças entra navegadores.

A API Fullscreen está fora do escopo deste artigo, mas mostro a seguir um trecho de código que produz os efeitos esperados em navegadores com engine WebKit e Blink.

<h1 id="element">Este cabeçalho será estilizado com fundo na cor laranja quando em modo tela cheia.</h1>
<button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button>

h1:fullscreen { background: orange; }

Demonstração:

Ver pen CSS :fullscreen pseudo-class por Ricardo Zea (@ricardozea) no CodePen.

Índice ⇧

Pseudoelementos

Conforme foi dito no início deste artigo pseudoelementos são uma espécie de elementos virtuais que podem ser tratados como elemento HTML regular. Eles não existem na árvore do documento (no DOM), pois não são inseridos na marcação HTML, eles são criados com uso de CSS.

Também foi dito que dois pontos dobrados (::) e dois pontos simples (:) se destinam meramente a diferenciar visualmente as sintaxes CSS 2.1 e CSS3 para os pseudoelementos. Use aquela que você quiser.

::before/:before

O pseudoelemento :before e seu vizinho :after cria conteúdo (textual ou de forma) em um elemento HTML regular. Ressaltamos mais uma vez que tais conteúdos não estão presentes no DOM embora possam ser manipulados como se estivessem. A propriedade content é uma funcionalidade das CSS.

Lembre-se que texto criado com uso deste pseudoelemento não pode ser selecionado.

<h1>Ricardo</h1>

h1:before {
    content: "Hello "; /* Notar o espaço em branco depois da palavra Hello. */
}

A renderização é conforme mostrado a seguir:

Hello Ricardo!

Nota: Notou o espaço em branco depois da palavra "Hello "? Pois é em conteúdos gerados espaços em branco no código são considerados na renderização.

Índice ⇧

::after/:after

O pseudoelemento :after é usado para criar conteúdo (seja texto ou formas) em um elemento HTML. Tais conteúdos não serão incluídos no DOM, mas podem ser manipulados com CSS como se ali estivessem. para que isso seja possível é necessário que a propriedade content seja declarada nas CSS.

Convém notar que conteúdos textuais assim criados não podem ser selecionados.

<h1>Ricardo</h1>

h1:after {
    content: ", Web Designer!";
}

A renderização é conforme mostrado a seguir:

Ricardo, Web Designer!

Índice ⇧

::backdrop (experimental)

O pseudoelemento ::backdrop é um box criado por trás de um elemento em tela cheia e à frente de qualquer outro conteúdo. É usado em combinação com a pseudoclasse :fullscreen com a finalidade de estilizar a cor de fundo de uma janela maximizada — nos casos em que não é desejável o fundo na cor preta default.

Nota: O pseudoelemento ::backdrop requer o uso de dois pontos dobrados na sua sintaxe e não funciona se for usado dois pontos simples.

Vamos em frente com a pseudoclasse :fullscreen.

<h1 id="element">Este cabeçalho será estilizado com fundo laranja (orange) em modo tela cheia.</h1>
<button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button>

h1:fullscreen::backdrop {
    background: orange;
}

Demonstração:

Ver pen CSS ::backdrop pseudoelemento por Ricardo Zea (@ricardozea) no CodePen.

Índice ⇧

::first-letter/:first-letter

O pseudoelemento :first-letter casa com aprimeira letra de uma linha de texto.

Se for incluída uma imagem, vídeo, ou tabela antes do texto, mesmo assim, o casamento com a primeira letra não será alterado.

É uma ótima funcionalidade para usar-se em parágrafos, por exemplo, com a finalidade de melhorar o apelo visual tipográfico sem precisar se recorrer a imagens ou recursos externos.

Dica: Conteúdos textuais criados com o pseudoelemento :before também terão sua primeira letra casada por este pseudoelemento, mesmo não fazendo parte do DOM.

h1:first-letter  { font-size: 5em; }

Índice ⇧

::first-line/:first-line

O pseudoelemento :first-line casa com a primeira linha do texto de um elemento. Ele só causa efeito textos dentro de elementos nível de bloco e não causa efeito em elementos inline.

Quando usado para estilizar um parágrafo, somente a primeira linha do parágrafo será estilizada., mesmo com o texto se distribuindo por várias linhas.

p:first-line { background: orange; }

Índice ⇧

::selection

O pseudoelemento ::selection casa com a porção do documento que tenha sido selecionada.

Até segunda ordem os navegadores com engine baseadas em Gecko requerem o prefixo proprietário ::-moz-selection.

Nota: Combinar as versões com prefixo e sem prefixo em uma simples regra CSS não funcionará. É preciso declarar regras separadas para as duas versões.

::-moz-selection {
    color: orange;
    background: #333;
}

::selection  {
    color: orange;
    background: #333;
}

Índice ⇧

::placeholder (experimental)

O pseudoelemento ::placeholder casa com o texto inserido em campos de formulário com uso do atributo HTML placeholder.

Existe a sintaxe alternativa ::input-placeholder que é a sintaxe CSS usada.

Nota: Este pseudoelemento não é uma implementação prevista nas especificações e é provável que seja alterado no futuro, portanto use com cautela.

Em alguns navegadores (IE 10 e Firefox 18 e anteriores) o pseudoelemento ::placeholder foi implementado como uma pseudoclasse. Todos os demais navegadores implementam como um pseudoelemento. Assim, a menos que você tenha que oferecer suporte para as versões antigas do Firefox ou do IE 10 use a seguinte sintaxe:

<input type="email" placeholder="name@domain.com">

input::-moz-placeholder {
    color:#666;
}

input::-webkit-input-placeholder {
    color:#666;
}

/* IE 10 only */
input:-ms-input-placeholder {
    color:#666;
}

/* Firefox 18 e anteriores */
input:-moz-input-placeholder {
    color:#666;
}

Índice ⇧

Conclusões

Ufa! Foi bastante coisa, eh?

Pseudoclasses e pseudoelementos são bastante úteis, não é mesmo? Estas funcionalidades oferecem tantas possibilidades que podemos até nos sentir intimidados com elas. Mas, é assim a vida do web designer e do desenvolvedor.

Certifique-se de testar exaustivamente. Pseudoclasses e pseudoelementos bem implementados oferecem muitas possibilidades.

Espero que você tenha gostado deste artigo que é uma extensa referência, e, eu tinha de escrevê-lo. E não se esqueça de adicionar esta página aos seus favoritos!

Compartilhe essa matéria com seus amigos