Seletores CSS - Pseudoitens
Neste artigo iremos aprender sobre pseudoclasses e pseudoelementos em css.
Você não gostou da qualidade deste conteúdo?
(opcional) Você gostaria de comentar o que não lhe agradou?
Os Seletores são, na verdade, a essência da CSS. Sem eles, não teríamos como atribuir estilos aos elementos a não ser embutindo-os nos atributos de cada elemento, e isso seria terrível.
Tendo a oportunidade de selecionar os tipos ou as famílias inteiras de elementos que serão estilizados, podemos aplicar muitos estilos com apenas algumas linhas de CSS.
Neste artigo irei mostrar como usar os seletores de maneira inteligente.
Tipos de pseudoitens:
Há dois tipos de pseudoitens em CSS: pseudoclasses e pseudoelementos.
As pseudoclasses no CSS 2.1 são:
- :link - Link não visitado
- :visited - Link visitado
- :hover - Elemento com o mouse posicionado sobre ele
- :focus - Elemento realçado
- :active - Elemento ativo(como um link ao ser clicado)
- :first-child - Elemento que é o primeiro filho de outro elemento
- :lang() - Elemento baseado no valor de seu atributo lang
Os pseudoelementos na CSS2.1 são:
- ::first-line
- ::first-letter
- ::before
- ::after
Qual a diferença afinal? A diferença está no modo como os pseudoitens afetam o documento.
As pseudoclasses atuam como se adicionassem classes ao documento.
Os pseudoelementos agem como se levassem os elementos a serem inseridos no documento.
No próximo exemplo vamos dobrar o tamanho da primeira letra de um elemento h1, para isso iremos usar o pseudoelemento ::first-letter .
Para isso, crie um documento html e adicione um <h1> nele.
Listagem 1: Criando o HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Seletores</title> </head> <body> <h1><first-letter>T</first-letter>estando seletores</h1></body> </html>
Agora iremos fazer o CSS estilizando o documento usando o pseudoelemento.
Listagem 2: Usando Pseudoelementos no CSS
<style>
h1:first-letter {font-size: 250%};
</style>
Dessa forma pudemos estilizar somente a primeira letra por exemplo do elemento escolhido.
Caso quiséssemos fazer a mesma coisa sem utilizar de pseudoitens, teria de ser por meio de classes, gerando muito mais código e sendo mais trabalhoso também. Como podemos ver na Listagem3.
Listagem 3: Não usando Pseudoitens
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Seletores</title>
<style>
span.primeira-letra {font-size: 250%};
</style>
</head>
<body>
<h1><span class="primeira-letra">T</span>estando seletores</h1>
</body>
</html>
A ideia de pseudo é porquê quando usamos os pseudoitens, o navegador interpreta como se realmente tivesse acontecendo aquilo, mesmo não acontecendo na prática.
Espero que tenham gostado e até a próxima.
Espero que tenham gostado e até o próximo artigo.
Ricardo Arrigoni
Desenvolvedor Front-End e Coordenador dos sites Linha de Código e MrBool, Atuo na área de Webdesign há mais de 4 anos. Para trabalhos freelancers visite meu portfólio: www.ricardoarrigoni.com.br ou se preferir me mande um e-mail.
3 COMENTÁRIOS
Em breve estarei postando o meu primeiro, falando sobre como desenhar um mapa isométrico simples com o <canvas> do HTML5 e Javascript. Eu ficaria muito agradecido em ter sua opinião.
Abraço.
