10.1 Pseudo-classes
Pseudo-classes and pseudo-elements in HTML and CSS let you style elements based on their state or content, without needing to add extra classes or change the HTML document structure. They provide cool tools for making interactive and aesthetically pleasing web pages.
Pseudo-classes are applied to elements based on their state or position in the document structure. They help style elements in various situations like when the mouse hovers over them, they are focused, or selected. Pseudo-classes begin with a colon (:).
The simplest pseudo-classes:
The pseudo-class :hover applies to an element when the user hovers over it with the mouse.
<button type="button">Button</button>
button:hover {
color: red;
}
The pseudo-class :focus applies to an element when it gets focus, like when clicking on an input field.
<input type="text">
input:focus {
outline-color: blue;
}
The pseudo-class :active applies to an element when it is active, like when clicking on a link or button.
<button type="button">Button</button>
button:active {
background-color: green;
}
The pseudo-class :visited applies to links that the user has already visited.
<a href="#">Link</a>
a:visited {
color: purple;
}
10.2 Pseudo-elements
Pseudo-elements let you style parts of elements that aren't separate HTML elements. They start with two colons (::). Pseudo-elements are used to create and style content before or after an element, highlight the first line or letter of an element, and more.
The simplest pseudo-elements:
The pseudo-element ::before inserts content before an element's content.
<p>My name is Stepan.</p>
p::before {
content: "Hello! ";
color: blue;
}
The pseudo-element ::after inserts content after an element's content.
<p>Attention!</p>
p::after {
content: " Thank you for your attention!";
color: red;
}
The pseudo-element ::first-line applies to the first line of an element. It lets you style just the first line of text.
<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;
}
The pseudo-element ::selection applies to text selected by the user.
<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;
}
Try selecting the text in the result.
10.3 Examples of using pseudo-elements
Pseudo-classes and pseudo-elements in HTML and CSS provide great opportunities for styling elements based on their state or content. They allow creating more interactive and visually appealing web pages without changing the HTML structure.
Example 1: Inserting an icon before link text
<html>
<head>
<style>
a::before {
content: "🔗";
margin-right: 5px;
}
</style>
</head>
<body>
<a href="#">This is a link with an icon</a>
</body>
</html>
Example 2: Adding a styled block after a paragraph
<html>
<head>
<style>
p::after {
content: "🌟";
display: block;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<p>This is a paragraph of text.</p>
</body>
</html>
Combining
Pseudo-classes and pseudo-elements can be combined to create complex and powerful styles.
Example: Styling selected text within a link on hover
<html>
<head>
<style>
a:hover::selection {
background-color: lightblue;
color: navy;
}
</style>
</head>
<body>
<a href="#">Select this text, then hover over it with your mouse.</a>
</body>
</html>
GO TO FULL VERSION