CSS pseudo-elements and pseudo-classes are versatile selectors that allow you to style specific elements and states within your HTML documents. In this tutorial, we’ll explore these powerful CSS features, providing clear explanations and practical code examples.
Introduction to Pseudo-Elements and Pseudo-Classes
Pseudo-elements and pseudo-classes are key to precisely targeting and styling HTML elements. Let’s start with a brief overview:
Pseudo-Elements
Pseudo-elements enable you to style specific parts of an element without requiring additional HTML markup. They are denoted with :: (double colons).
Example:
|
1 2 3 |
p::first-line { font-weight: bold; } |
Pseudo-Classes
Pseudo-classes, on the other hand, select elements in specific states or positions, like :hover, :active, or :first-child. They are denoted with : (single colon).
Example:
|
1 2 3 |
a:hover { color: #FF5733; } |
Now, let’s delve into the world of CSS pseudo-elements and pseudo-classes.
Pseudo-Elements
1. ::before and ::after
The ::before and ::after pseudo-elements add content before and after an element. They are perfect for decorative elements or inserting additional content.
Example:
|
1 2 3 |
button::before { content: "👍 "; } |
2. ::first-letter and ::first-line
These pseudo-elements style the first letter or first line of a block-level element, enhancing typography.
Example:
|
1 2 3 |
p::first-letter { font-size: 24px; } |
3. ::selection
The ::selection pseudo-element targets text selected by the user, allowing you to style selected text.
Example:
|
1 2 3 4 |
::selection { background-color: #3498db; color: #fff; } |
Pseudo-Classes
1. :not()
The :not() pseudo-class selects elements that do not match the specified selector, making it useful for excluding specific elements from a style rule.
Example:
|
1 2 3 |
p:not(.special) { font-style: italic; } |
2. :nth-child()
The :nth-child() pseudo-class selects elements based on their position within a parent element, allowing you to style every nth element.
Example:
|
1 2 3 |
ul li:nth-child(odd) { background-color: #f2f2f2; } |
3. :focus
The :focus pseudo-class styles elements when they gain focus, commonly used with interactive elements like form inputs.
Example:
|
1 2 3 |
input:focus { border: 2px solid #3498db; } |
Practical Exercises
Let’s reinforce your understanding with some exercises:
Exercise 1: Style Links
Select all unvisited links and give them a different color.
|
1 2 3 |
a:link { color: #3498db; } |
Exercise 2: Style Table Rows
Style odd rows in a table with a background color.
|
1 2 3 |
tr:nth-child(odd) { background-color: #f2f2f2; } |
Exercise 3: Style Form Inputs
Style text inputs when they have focus, adding a border and changing the background color.
|
1 2 3 4 |
input[type="text"]:focus { border: 2px solid #3498db; background-color: #f0f0f0; } |
Browser Compatibility
Pseudo-elements and pseudo-classes are widely supported in modern browsers. However, for older browser versions, some advanced pseudo-elements and pseudo-classes may have limited compatibility.
Conclusion
CSS pseudo-elements and pseudo-classes are essential for enhancing the styling of your web documents. By mastering these selectors, you can create unique and interactive web designs. Explore more pseudo-elements and pseudo-classes, experiment with exercises, and incorporate them into your web projects to enhance user experience and design aesthetics.