CSS Pseudo-classes are selectors that select elements based on their current state or relationship with other elements in the document, rather than their attributes or content. Pseudo-classes are used to style elements based on user interactions, such as hovering over an element, or based on their position in the document, such as the first child of a parent element. In this tutorial, we will discuss the different types of pseudo-classes and how to use them in CSS.
How to use CSS Pseudo-classes?
Types of Pseudo-Classes
Link Pseudo-classes
These are used to style links based on their state. There are four link pseudo-classes:
- :link – Selects all unvisited links
- :visited – Selects all visited links
- :hover – Selects links when the mouse pointer hovers over them
- :active – Selects links when they are clicked
Example:
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: green;
}UI Element State Pseudo-classes
These are used to style elements based on their current state, such as whether they are checked or selected.
- :checked – Selects all checked radio buttons or checkboxes
- :enabled – Selects all enabled form elements
- :disabled – Selects all disabled form elements
- :focus – Selects the element that has focus
Example:
input[type="checkbox"]:checked {
background-color: yellow;
}
input:enabled {
color: black;
}
input:disabled {
color: gray;
}
input:focus {
border: 1px solid blue;
}Structural Pseudo-classes
These are used to select elements based on their position in the document hierarchy.
- :first-child – Selects the first child of a parent element
- :last-child – Selects the last child of a parent element
- :nth-child(n) – Selects the nth child of a parent element
- :nth-last-child(n) – Selects the nth child of a parent element, counting from the last child
Example:
li:first-child {
color: red;
}
li:last-child {
color: blue;
}
li:nth-child(odd) {
background-color: lightgray;
}
li:nth-last-child(2) {
font-weight: bold;
}How to use Pseudo-classes in CSS
To use a pseudo-class in CSS, you simply append it to the end of the selector, preceded by a colon (:). For example, to select all links on a page, you would use the following selector:
a {
color: blue;
}To select only unvisited links, you would use the :link pseudo-class:
a:link {
color: blue;
}You can also combine pseudo-classes with other selectors to create more specific rules. For example, to select the first child of a parent element that is an unordered list, you would use the following selector:
ul li:first-child {
color: red;
}Conclusion
Pseudo-classes are a powerful tool in CSS for selecting elements based on their current state or position in the document hierarchy. By using pseudo-classes, you can create more dynamic and interactive web pages that respond to user interactions and changes in the document structure. With the examples and guidelines provided in this tutorial, you should be able to start using pseudo-classes in your CSS code and take your web design skills to the next level.