Introdução

Fala pessoal, sejam bem-vindos ao segundo post da série que irá te ensinar de uma vez por todas sobre todos os seletores de CSS.

No post de hoje iremos falar sobre as pseudo-classes, ja avisando que não conseguiremos abordar todas pois são muitas, mas nada ficará deixado para trás e tudo será mencionado nos próximos episódios dessa série.

Temos muitas pseudo-classes e pouco tempo, vamos tacar o pau nesse carrinho !

pseudo-classes

As pseudo-classes do css são todas as propriedades que começam com :(dois pontos), tipo os mais comuns como :hover, :active e :focus, apesar de geralmente estarem acompanhadas de outros seletores normais tipo classes, ids ou elementos, elas também podem ser usadas separadamente, como o exemplo do :root.

No post de hoje, nós iremos ver as seguintes pseudo-classes:

:active

A classe :active, irá estilizar o elemento no momento em que ele for ativado, todo elemento recebe o status de :active quando são clicados.

index.html

<!-- código CSS do snippet abaixo -->
<style>
/* todos os elementos div, p e button quando 
   forem clicados ficarão da cor azul e fonte branca */
  div:active, p:active, button:active {
    background-color: blue;
    color: #fff;
  }
</style>
...
...
<!-- código html do snippet abaixo -->
<div>
Conteudo dentro da div para ela ter uma altura
</div>

<p>Texto dentro da tag p</p>

<button>Um botão</button>
...

See the Pen Pseudo-classe :active by Matheus Mesquita (@mathmesquita) on CodePen.

:empty

A classe :empty, irá adicionar estilo a todos os elementos que não tiverem conteúdo nenhum. Literalmente nenhum, não pode nem ter "pulo de linha" ou espaço.

index.html

<!-- código CSS do snippet abaixo -->
<style>
/* todos os elementos que estiverem totalmente vazios 
   inclusive de "pulos de linha", ganha um tamanho para 
   ser visivel e cor de fundo azul */
  div:empty, p:empty, button:empty{
    background-color: blue;
    height: 10px;
    width: 100px;
  }
</style>
...
...
<!-- código html do snippet abaixo -->
<div></div>

<p>um p com conteudo</p>
<p></p>

<button></button>
...

See the Pen Pseudo-classe :empty by Matheus Mesquita (@mathmesquita) on CodePen.

:hover

A classe :hover, quando o mouse passar por cima do elemento, ele receberá a classe :hover.

index.html

<!-- código CSS do snippet abaixo -->
<style>
/* todos os elementos que o mouse passar por cima
  receberão a pseudo-classe hover, passando a ficar
  com fundo azul e letras brancas */
  div:hover, p:hover, button:hover{
    background-color: blue;
    color: #fff;
  }
</style>
...
...
<!-- código html do snippet abaixo -->
<div>div com hover</div>

<p>um p com hover</p>

<button>botão com hover</button>
...

See the Pen Pseudo-classe :hover by Matheus Mesquita (@mathmesquita) on CodePen.

:checked

A classe :checked, irá estilizar todos os elementos input do tipo checkbox ou radio, que estiverem marcados.

index.html

<!-- código CSS do snippet abaixo -->
<style>
/* todos os labels que vem imediatamente 
   após os inputs marcados(selecionados), 
   ficarão com fundo azul e texto branco */
  input:checked + label{
    background-color: blue;
    color: #fff;
  }
</style>
...
...
<!-- código html do snippet abaixo -->
<input type="checkbox" id="checkbox1"/>
<label for="checkbox1">A checkbox 1</label>
<br />
<input type="checkbox" id="checkbox2"/>
<label for="checkbox2">A checkbox 2</label>
<br />
<input type="radio" name="rad" id="radio1" />
<label for="radio1">Radio 1</label>
<br />
<input type="radio" name="rad" id="radio2" />
<label for="radio2">Radio 2</label>
...

See the Pen Pseudo-classe :checked by Matheus Mesquita (@mathmesquita) on CodePen.

Pseudo-classes de Inputs

Tirando os inputs de tipo checkbox e o radio, resolvi juntar todos os outros da mesma forma que eu fiz com o seletor [attr] no outro post. Sendo assim todos os exemplos irão aparecer após as pseudo-classes e suas explicações.

:disabled

A classe :disabled, irá estilizar todos os elementos do tipo input que possuirem o atributo disabled.

:enabled

A classe :enabled, irá estilizar ao contrário da :disabled todos os elementos sem o atributo disabled.

:focus

A classe :focus, irá adicionar estilo a todos os elementos do tipo input que estiverem com o foco do usuário.

:invalid

A classe :invalid, irá estilizar todos os elementos que estiverem inválidos para o tipo do input.

:valid

A classe :valid, irá estilizar os inputs que estiverem válidos.

:in-range

A classe :in-range, irá adicionar estilo nos inputs que estiverem dentro dos limites estabelecidos por min e max.

:out-of-range

A classe :out-of-range, irá adicionar estilo nos inputs que NÃO estiverem dentro dos limites estabelecidos por min e max.

:optional

A classe :optional, irá estilizar todos os inputs que NÃO, receberam o atributo required.

:required

A classe :required, irá estilizar todos os inputs que possuirem a tag required.

:read-only

A classe :read-only, irá estilizar todos os inputs que tiverem a tag readonly.

:read-write

A classe :read-write, irá adicionar estilo a todos os inputs que NÃO tiverem a tag readonly.

Exemplos

É pessoal, como viram, tem muitas pseudo-classes possíveis em elementos do tipo input chegando ao ponto de algumas delas vocês talvez nunca irão usar, mas é claro que com criatividade todas podem ser usadas ! LEMBRANDO QUE, algumas dessas pseudo-classes foram introduzidas no css3 e para ter compartibilidade em todos os navegadores elas possuem alguns prefixos, dessa maneira então é sempre indicado você passar o seu CSS em um auto-prefixer.

index.html

<!-- código CSS do snippet abaixo -->
<style>
label{font-family: Verdana, sans-serif;font-size: 14px;}

/* inputs desabilitados ficarão com fundo  
   vermelho e bordas pretas*/
  input:disabled{
    background-color: red;
    border: 1px solid #000;
  }

/* o input com id #ex2 que estiver habilitado 
   ficaá com cor de fundo amarela e letras pretas */
  input#ex2:enabled{
    background-color: yellow;
    color: #000;
  }

/* o input com o id #ex3 que estiver com foco do usuario 
   ficará com uma borda de 2px azul*/
  input#ex3:focus{
    border: 2px solid blue;
  }

/* o input com id #ex4 com conteudo invalido 
   terá uma borda vermelha */
  input#ex4:invalid{
    border-color: red;
  }

/* o input com id #ex5 valido ficará com fundo 
   verde e letras brancas */
  input#ex5:valid{
    background-color: green;
    color: #fff;
  }

/* o input que estiver dentro do range irá ter 
   borda verde */
  input:in-range{
    border-color: green;
  }

/* o input que estiver fora do range ficará com 
   fundo rosa */
  input:out-of-range{
    background-color: pink;
  }

/* o input com id #ex8 e que for opcional ficará 
   com fundo verde escuro e letras brancas */
  input#ex8:optional{
    background-color: #003300;
    color: #fff;
  }

/* o input que for obrigatório 
   ficará com fundo vermelho escuro e letras brancas */
  input:required {
    background-color: #660000;
    color: #fff;
  }

/* o input que estiver disponivel somente para leitura 
   ficará com fundo cinza e borda cinza escuro */
  input:read-only{
    background: #e3e3e3;
    border: 1px solid #666;
  }

/* o input com id #ex11 e disponivel para edição sem a tag
   readonly ficará com fundo laranja e letras brancas*/
  input#ex11:read-write{
    background: #ff3300;
    color: #fff;
  }
</style>
...
...
<!-- código html do snippet abaixo -->
<label for="ex1">Input :disabled</label><br />
<input id="ex1" type="text" disabled />
<br /><br />

<label for="ex2">Input :enabled</label><br />
<input id="ex2" type="text" />
<br /><br />

<label for="ex3">Clique no input para visualizar o :focus</label><br />
<input id="ex3" type="text" />
<br /><br />

<label for="ex4">Input de email invalido</label><br />
<input id="ex4" type="email" value="meu_email_mal_formatado"/>
<br /><br />

<label for="ex5">Input de email valido</label><br />
<input id="ex5" type="email" value="[email protected]"/>
<br /><br />

<label for="ex6">Input que está dentro dos limites</label><br />
<input id="ex6" type="number" min="0" max="100" value="36" />
<br /><br />

<label for="ex7">Input que está FORA dos limites</label><br />
<input id="ex7" type="number" min="0" max="100" value="402" />
<br /><br />

<label for="ex8">Input opcional</label><br />
<input id="ex8" type="text" />
<br /><br />

<label for="ex9">Input obrigatório</label><br />
<input id="ex9" type="text" required />
<br /><br />

<label for="ex10">Input disponível somente para leitura :read-only</label><br />
<input id="ex10" type="text" value="esse post é demais" readonly />
<br /><br />

<label for="ex11">Input input que pode ser alterado e lido :read-write</label><br />
<input id="ex11" type="text" value="você pode alterar isso" />
...

See the Pen Pseudo-classes inputs by Matheus Mesquita (@mathmesquita) on CodePen.

Conclusão

Bem galera, sempre bom lembrar, algumas dessas pseudo-classes são dependentes de prefixos, sendo assim sempre passe seu código em um auto-prefixer !

O post ficou longo, especialmente pela tag input que tem várias pseudo-classes muito interessantes e que podem ser usadas no nosso dia a dia para informar ao usuário o que está acontecendo na interface dele.

Por hoje é só(foi coisa pra krl), e espero que tenham gostado, muito obrigado a quem ficou lendo até aqui e espero comentários críticas e sugestões como sempre ! Valeu de novo e até o próximo post. :D