10.1 Pseudoclasses
Pseudoclasses e pseudo-elementos em HTML e CSS permitem estilizar elementos com base em seu estado ou conteúdo, sem a necessidade de adicionar classes extras ou alterar a estrutura do documento HTML. Eles oferecem ferramentas incríveis para criar páginas web interativas e visualmente atraentes.
Pseudoclasses são aplicadas a elementos com base em seu estado ou posição na estrutura do documento. Elas ajudam a estilizar elementos em várias situações, como quando o cursor passa sobre eles, quando estão em foco ou quando são selecionados. As pseudoclasses começam com dois pontos (:).
As pseudoclasses mais simples:
A pseudoclasse :hover é aplicada a um elemento quando o usuário passa o cursor sobre ele.
<button type="button">Button</button>
button:hover {
color: red;
}
A pseudoclasse :focus é aplicada a um elemento quando ele recebe foco, por exemplo, ao clicar em um campo de entrada.
<input type="text">
input:focus {
outline-color: blue;
}
A pseudoclasse :active é aplicada a um elemento quando ele está ativo, por exemplo, quando clica em um link ou botão.
<button type="button">Botão</button>
button:active {
background-color: green;
}
A pseudoclasse :visited é aplicada a links que o usuário já visitou.
<a href="#">Link</a>
a:visited {
color: purple;
}
10.2 Pseudo-elementos
Pseudo-elementos permitem estilizar partes dos elementos que não são elementos HTML separados. Eles começam com dois dois pontos (::). Os pseudo-elementos são usados para criar e estilizar conteúdos antes ou depois de um elemento, destacar a primeira linha ou primeira letra de um elemento e outras tarefas.
Os pseudo-elementos mais simples:
O pseudo-elemento ::before insere conteúdo antes do conteúdo de um elemento.
<p>Meu nome é Stepan.</p>
p::before {
content: "Olá! ";
color: blue;
}
O pseudo-elemento ::after insere conteúdo após o conteúdo de um elemento.
<p>Atenção!</p>
p::after {
content: " Obrigado pela atenção!";
color: red;
}
O pseudo-elemento ::first-line é aplicado à primeira linha de um elemento. Ele permite estilizar apenas a primeira linha de texto.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
p::first-line {
font-weight: bold;
color: green;
}
O pseudo-elemento ::selection é aplicado ao texto selecionado pelo usuário.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
::selection {
background-color: blue;
color: yellow;
}
Tente selecionar o texto no resultado.
10.3 Exemplos de uso de pseudo-elementos
Pseudoclasses e pseudo-elementos em HTML e CSS oferecem ótimas oportunidades para estilizar elementos com base em seu estado ou conteúdo. Eles permitem criar páginas web mais interativas e visualmente atraentes sem alterar a estrutura do HTML.
Exemplo 1: Inserindo um ícone antes do texto do link
<html>
<head>
<style>
a::before {
content: "🔗";
margin-right: 5px;
}
</style>
</head>
<body>
<a href="#">Este é um link com ícone</a>
</body>
</html>
Exemplo 2: Adicionando um bloco estilizado após o parágrafo
<html>
<head>
<style>
p::after {
content: "🌟";
display: block;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<p>Este é um parágrafo de texto.</p>
</body>
</html>
Combinando
Pseudoclasses e pseudo-elementos podem ser combinados para criar estilos complexos e poderosos.
Exemplo: Estilizando texto selecionado dentro de um link quando o cursor passa sobre ele
<html>
<head>
<style>
a:hover::selection {
background-color: lightblue;
color: navy;
}
</style>
</head>
<body>
<a href="#">Selecione este texto e depois passe o cursor sobre ele.</a>
</body>
</html>
GO TO FULL VERSION