How to use Pseudo-classes in CSS
Discover how pseudo-classes in CSS enhance user interaction and styling!
nanadwumor
- Pseudo-classes apply styles based on user interaction, element position, or relationships between elements.
- Normal classes are applied directly as attributes, whereas pseudo-classes use special syntax to target elements.
- Combining pseudo-classes can style elements based on multiple conditions, such as link state and hover status.
- Mutually exclusive pseudo-classes cannot coexist, like a link being both visited and unvisited simultaneously.
RECOMMENDED ARTICLES
Combining a class and pseudo-class
Can you combine class and pseudo-class to style elements? Learn how to precisely target and style elements with advanced pseudo-classes in CSS! Combining classes and pseudo-classes styles elements based on both their type and class, such as...
Types of Pseudo-classes
Know the types of Pseudo-classes, master CSS styling with pseudo-classes for precise element targeting and design control! Structural pseudo-classes style elements based on their position or hierarchy in the HTML document, like...
Attribute Selectors
From targeting elements based on their attributes to styling based on partial values, attribute selectors offer flexibility and control. Elevate your CSS skills as we dive into the nitty-gritty of attribute selectors. CSS 2 introduces attribute...
A Pseudo-class is used to apply styles to an element depending on the user interaction with that element, the position of the element in the HTML document or the element’s relationship with other elements.
Normal classes are attached to elements as attributes and CSS uses to change the element through the class.
For example, let’s say you have the following list, and you want to color all even-numbered list. You could define a class called even to handle the style of the even-numbered <li> elements.
|
1 2 3 4 5 6 7 |
<ul> <li class="even">Item 1</li> <li>Item 2</li> <li class="even">Item 3</li> <li>Item 4</li> <li class="even">Item 5</li> </ul> |
The CSS is
|
1 2 3 |
.even{ color : red; } |
Instead of using a class, we could use a Pseudo-class to achieve same result. That’s,
|
1 2 3 |
ul li:nth-child(even) { color: blue; } |
Every pseudo-class is preceded by a colon (:). The name of a Pseudo-class is either a single word or hyphenated words. For example, :hover, :link, :nth-child are all pseudo-classes.
Combining or chaining pseudo-classes
Like normal classes, two or more pseudo-classes can be combined. For example
|
1 2 3 |
a:link{ color : blue; } |
makes the color of an unvisited link blue. Also,
makes the color of the text of a link red when you hover over the link.
We can combine these two instances into one style if we want a color change if a user hovers over an unvisited link. This is
The selector reads that if the link is unvisited and one hovers over it, change the color to red. Alternatively, it can we written as
|
1 2 3 |
a:link:hover { color : red; } |
|
1 2 3 |
a:hover { color : red; } |
|
1 2 3 |
a:link:hover { color : red; } |
|
1 |
a[href][target] {text-decoration : line-through;} |
This selector reads that if one hovers over an unvisited link, turn the text red.
Example of a scenario where three pseudo-classes are combined is
|
1 2 3 |
li:nth-child(3n):not(:hover) { color: blue; } |
This rule selects every third list item (:nth-child(3n)) and applies a blue color to it, but only if it is not currently being hovered over (:not(:hover)). This ensures that the color change only occurs when the item is not being interacted with, providing a dynamic visual effect.
Mutually exclusive pseudo-classes
Some pseudo-classes cannot exist together no more than light and darkness can coexist. For example, a link cannot be *visited* and *unvisited* at the same time. It must be only one of the state at an instance. Therefore, we cannot write
|
1 2 3 |
a:link:visited:hover { color : red } |
The selector reads that if you hover over a visited link which is unvisited, turn text red. This is impractical because a link cannot be a visited one and at the same time be unvisited one.
Recent Comments