O Pseudo Classes

[pic 1][pic 2]

_______________________________________________________________________________________

[pic 3] Aula 11 – Pseudo Classes

Introdução

        Nesta aula apresentaremos o conceito de pseudo-classe e quais as vantagens de seu uso.

O que é uma pseudo-classe?

        É uma palavra-chave adicionada a seletores do CSS que específica um estado especial do elemento selecionado.

Principais pseudo-classes

        Essas são as que consideramos como principais, mas sinta-se a vontade para explorar mais sobre o tema.

:hover

        Usado para atribuir um efeito ao elemento selecionado, quando o usuário mover o mouse sobre a área do elemento.

[pic 4]

[pic 5]

Exemplo: Pseudo-classe :hover

:focus

        Usado para estilizar um elemento que está em foco, que pode acontecer quando o usuário usa o teclado para selecionar, com a tecla TAB por exemplo, ou quando seleciona com o mouse em um campo de formulário.

[pic 6]

[pic 7]

Exemplo: Pseudo-classe :focus

:nth-child(), :first-child e :last-child

        As pseudo-classes :nth-child(), :last-child e :first-child são muito úteis para selecionar elementos específicos num conjunto de elementos HTML e aplicar estilos de forma precisa.

        A pseudo-classe :nth-child() permite selecionar elementos com base em sua posição em relação aos demais elementos irmãos. Ela recebe um argumento que define qual elemento deve ser selecionado. Esse argumento pode ser um número inteiro, um valor even para selecionar elementos pares, um valor odd para selecionar elementos ímpares, ou uma fórmula matemática que inclui operações de soma e subtração.

[pic 8]

        Já a pseudo-classe :first-child seleciona o primeiro elemento de um conjunto de elementos irmãos e a pseudo-classe :last-child seleciona o último elemento de um conjunto de elementos irmãos.

[pic 9]

[pic 10]        

Exemplo: Pseudo-classe :nth-child, :first-child e :last-child

Conclusão

        Na aula de hoje aprendemos o que é uma pseudo-classe e quais são as mais utilizadas no dia-a-dia. Há várias outras pseudo-classes que podem ser usadas nas mais variadas situações, caso queira saber mais acesse a documentação oficial.

Referências

• MDN | Pseudo-classes
• MDN | :nth-child()
• Video: Entendendo as pseudo-classes no CSS

________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________