Introdução às pseudo-classes e pseudo-elementos CSS
Você pode usar seletores CSS para direcionar e definir o estilo de elementos em uma página da web. Um seletor padrão pode ter como alvo um parágrafo específico ou todos os títulos em um determinado nível. Os pseudo seletores vão além, permitindo que você direcione partes da página com mais nuances.
As pseudoclasses têm como alvo diferentes estados de um elemento: quando o ponteiro passa sobre um link, por exemplo. Os pseudoelementos permitem que você direcione uma parte específica de um elemento, como a primeira linha de um parágrafo.
Então, sem mais delongas, vamos explicar o básico de pseudo-classes e pseudo-elementos.
O que é uma pseudo-classe?
Uma pseudoclasse é um seletor CSS que seleciona elementos HTML em um estado específico. Alguns estados se referem ao contexto, como o primeiro elemento de seu tipo. Outros são comportamentais, como quando um link é passado pelo ponteiro do mouse. Eles permitem que você estilize o conteúdo com base nas ações do usuário. Os estados contextuais, em particular, ajudam a escrever código flexível, sustentável e limpo. Os estados comportamentais oferecem um atalho para a funcionalidade para a qual você poderia ter que usar o JavaScript.
Você pode facilmente reconhecer pseudo-classes como eles começam com dois pontos (:). Vamos ver algumas instâncias de pseudo classes simples e de ação do usuário.
Exemplo de pseudoclasse simples
Primeiro, vamos escrever o código HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<header>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</header>
<section>
<p>
Voluptatum fuga, impedit sequi totam numquam assumenda repellat
tempora sapiente! Nihil unde vel recusandae, expedita aperiam tempora
totam deserunt non porro reprehenderit.
</p>
<p>
Dicta totam non iusto labore sapiente numquam hic tempora earum,
minima repellendus pariatur fugit nobis ex adipisci, tempore vitae
laboriosam harum. Quidem!
</p>
<p>
Suscipit repellendus cupiditate dignissimos eveniet beatae quas
laudantium, laboriosam minus iusto, corporis ullam alias porro sequi
necessitatibus autem ipsam debitis libero sapiente!
</p>
<p>
Iste iure deserunt vel? Nisi omnis quo quibusdam inventore delectus.
Molestias exercitationem in quia possimus consectetur dolorum sequi
veniam quo corporis ullam?
</p>
<p>
Suscipit repellendus cupiditate dignissimos eveniet beatae quas
laudantium, laboriosam minus iusto, corporis ullam alias porro sequi
necessitatibus autem ipsam debitis libero sapiente!
</p>
<p>
Iste iure deserunt vel? Nisi omnis quo quibusdam inventore delectus.
Molestias exercitationem in quia possimus consectetur dolorum sequi
veniam quo corporis ullam?
</p>
<p>
Asperiores illum beatae dolores, dolore quae exercitationem laudantium,
officia nam distinctio tempora deleniti itaque quibusdam iste quo eaque
reiciendis nostrum saepe aperiam?
</p>
</section>
</body>
</html>
Observe que há vários parágrafos na mesma seção. Para estilizá-los individualmente, você pode dar uma classe separada para cada um e usar um seletor de classe CSS. Mas isso não é muito prático, especialmente se o conteúdo pode ser alterado com frequência. Em vez disso, você pode usar pseudo-classes que não existem no HTML, mas ainda permitem que você direcione e estilize os elementos. Vamos ver como isso funciona:
CSS
body {
font-size: 1em;
}
header {
font-size: 3em;
}
/* Selecting the first paragraph */
p:first-child {
font-size: 1.3em;
}
/* Selecting the last paragraph */
p:last-child {
color: red;
text-decoration: underline;
}
/* Selecting the nth paragraph */
p:nth-child(3) {
color: blue;
font-style: italic;
}
p:nth-child(4) {
color: #666;
font-size: 1.9em;
}
p:nth-child(5) {
color: yellowgreen;
font-weight: bold;
}Saída:
Usando pseudo-classes simples como : first-child ,: nth-child (x) e ,: last-child podemos facilmente selecionar e estilizar os parágrafos. Observe que essas pseudo classes selecionam os próprios parágrafos, não seus elementos filhos.
Exemplo de pseudoclasse de ação do usuário
A ação do usuário ou pseudo classes comportamentais só se aplicam quando o usuário interage com o documento. Um dos exemplos mais populares inclui : link ,: visitado ,: hover e : estados de foco . Vamos ver o exemplo : hover state para um link e uma imagem.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<div class="image-box">
<img class="image-back" src="images/By_Unsplash_Search.jpg" alt="Coding on a laptop" />
<img class="img-front" src="images/By_Unsplash.jpg" alt="Search bar with blue background" />
</div>
<div>
<a href="#">Learn more about Pseudo-classes</a>
</div>
</body>
</html>
Neste exemplo, existem duas imagens e um link. As imagens são posicionadas no mesmo local, então você pode trocá-las ocultando uma e mostrando a outra.
CSS
body {
font-family: 'Inter', sans-serif;
}
.image-box {
position: relative;
width: 70%;
margin: 5em;
color: #fff;
}
.image-box img {
display: inline-block;
position: absolute;
left: 0;
width: 70%;
}
.image-box img.img-front:hover{
opacity:0;
cursor: pointer;
}
a {
position: absolute;
bottom: 2em;
left: 3em;
text-decoration: none;
color: #222;
display: inline-block;
font-size: 2.5em;
font-weight: 600;
border-bottom: 5px solid rgb(250, 0, 0);
}
a:hover {
color: rgb(250, 0, 0);
border-bottom: none;
}
Este primeiro exemplo demonstra o efeito de passar o mouse sobre o link. O CSS muda de cor e borda:
Neste segundo exemplo, você pode ver o efeito de passar o mouse sobre a imagem. Ele tem sua opacidade definida como 0, o que torna a imagem efetivamente transparente.
O que é um pseudo-elemento?
Um pseudo-elemento se comporta de maneira semelhante a uma pseudo-classe. Lembre-se de que uma pseudoclasse se aplica a um elemento existente. Um pseudoelemento, entretanto, atua como se um novo elemento HTML existisse. Além disso, um pseudoelemento começa com dois pontos duplos ( ::) . Vamos ver como funciona com um exemplo.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<header>
<div class="header-img">
<img src="By_Unsplash.jpg" alt="Coding on a laptop" />
</div>
</header>
</body>
</html>
Agora, usaremos um pseudo-elemento :: before para adicionar o texto Learn More e um pseudo-elemento :: after para adicionar o texto Buy Now, usando apenas CSS. Também aplicaremos a propriedade position para colocar esses pseudoelementos em relação ao contêiner pai.
body {
font-family: 'Inter', sans-serif;
color: #666;
}
img {
width: 30em;
vertical-align: middle;
}
.header-img::before {
content: "Learn More";
color: #fff;
background-color: rgb(75, 159, 192);
padding: 0.3em 5em;
display: inline-block;
position: absolute;
top: 25px;
left: -70px;
transform: rotate(-45deg);
}
.header-img::after {
content: "Buy Now";
color: #fff;
background-color: rgb(212, 115, 91);
padding: 0.3em 5em;
display: inline-block;
position: absolute;
bottom: 25px;
right: -70px;
transform: rotate(-45deg);
}
header {
position: relative;
overflow: hidden;
font-weight: 600;
}
header,
section {
width: 30em;
}
O efeito final sobrepõe rótulos em formato de fita no canto superior esquerdo e no canto inferior direito da imagem:
Pseudo-classes e pseudo-elementos
As pseudo classes e pseudo-elementos CSS, quando usados corretamente, abrem portas para muitas possibilidades. Você pode se sentir oprimido no início, mas praticar essa técnica é a chave para melhorar suas habilidades de design da web. A chave é sempre testar seus projetos completamente, fazendo uso de recursos como o DevTools do Google Chrome.
Esperamos que você tenha aprendido o básico sobre pseudo-classes e pseudo-elementos. Lembre-se de que o aprendizado nunca para! Portanto, continue explorando novos seletores de CSS e tente implementá-los e testá-los em seu próximo projeto.
