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
- :empty
- :hover
- :checked
- :disabled
- :enabled
- :focus
- :invalid
- :valid
- :in-range
- :out-of-range
- :optional
- :required
- :read-only
- :read-write
: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.
<!-- 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.
<!-- 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.
<!-- 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.
<!-- 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.
<!-- 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="meu_email@gmail.com"/>
<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
