8.1 Basic Concepts
Combining pseudo-classes and pseudo-elements in CSS lets you create powerful and flexible selectors to style elements based on their state, structure, and content. This opens up a lot of possibilities for making complex and dynamic styles that enhance the user interface and interaction with the webpage.
Basics of Combining
Pseudo-classes
Pseudo-classes are marked by a single colon (:) and apply to elements based on their state or position. For example:
:hover— applies when you hover over an element:first-child— selects the first child of a parent element
Pseudo-elements
Pseudo-elements are marked by two colons (::) and are used to style parts of elements or add content. For example:
::before— adds content before an element::first-letter— styles the first letter of an element
Combining
You can combine pseudo-classes and pseudo-elements to create complex selectors that allow you to apply styles to elements based on their state and structure.
Syntax:
selector:pseudo-class::pseudo-element {
properties: values;
}
8.2 Combining for Interactivity
Example 1: Styling the First Letter on Hover
In this example, the first letter of a paragraph increases in size and turns red when you hover over the paragraph:
/* Styling the first letter of a paragraph on hover */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
<p>Hover over this paragraph to see the first letter change.</p>
Example 2: Adding Content Before a Link on Focus
In this example, an icon is added before a link and turns blue when the link is focused:
/* Adding an icon before a link on focus */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
8.3 Combining for Structuring Styles
Example 3: Styling the First Paragraph Inside a Div with Added Content
In this example, the first line of the first paragraph inside a div is bolded and turns green:
/* Styling the first line of the first paragraph inside a div */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
Example 4: Adding a Decorative Element After the Last List Item
In this example, a decorative element is added after the last list item and turns red:
/* Adding a decorative element after the last list item */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
8.4 Combining for Complex Conditions
Example 5: Styling Even List Items on Hover
In this example, even list items get a light gray background and blue text when hovered over:
/* Styling even list items on hover */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
Example 6: Styling Active Links That Have Been Visited
In this example, links that have been visited and are in an active state turn orange and are underlined:
/* Styling active links that have been visited */
a:visited:active {
color: #e67e22;
text-decoration: underline;
}
8.5 Full Implementation Example
/* Styling the first line of the first paragraph inside a div */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
/* Adding a decorative element after the last list item */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
/* Styling even list items on hover */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
/* Adding an icon before a link on focus */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
/* Styling the first letter of a paragraph on hover */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of Combining Pseudo-classes and Pseudo-elements</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<p>This is the first paragraph inside a div.</p>
<p>This is the second paragraph inside a div.</p>
</div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
<a href="#">Link with icon on focus</a>
<p>Hover over this paragraph to see the first letter effect.</p>
</body>
</html>
GO TO FULL VERSION