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
identifiers in CSS
The secret power of CSS identifiers, the tiny names that give you full control over your styles! Identifiers are custom CSS names you create. CSS treats similar names with different cases as unique. Used in list counters like...
Images in CSS
Did you know CSS can create images without using a single file? CSS uses URLs to display images. [crayon-6902085b003b5942600160-i/] serves images by device quality. Gradients generate images with colors only. Useful for backgrounds, designs, and...
inherit, initial, unset in CSS
Tiny CSS keywords can reset, copy, or undo styles with just one word. Keywords control styles without numbers inherit copies, initial resets, unset smart reset all applies to most properties, safer to limit revert returns to browser/user defaults...
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