Pseudo-Class Selectors
In CSS, pseudo-class selectors are used to style elements based on their state or position in the document. Pseudo-class selectors are represented by a colon : followed by the name of the pseudo-class. Pseudo-class selectors allow you to style elements based on user interaction, such as hovering over an element, or based on the position of an element in the document tree, such as the first child of a parent element.
Syntax
The syntax for pseudo-class selectors is as follows:
selector:pseudo-class {
/* CSS properties */
}
selector: The element to which the pseudo-class is applied.pseudo-class: The pseudo-class to be styled.CSS properties: The CSS properties to be applied to the pseudo-class.:: The:character represents the pseudo-class selector.- The
:character is used to style elements based on their state or position in the document. - Pseudo-class selectors are used to style elements based on user interaction or the position of an element in the document tree.
- Pseudo-class selectors are less specific than ID selectors and more specific than element selectors.
- Pseudo-class selectors can be combined with other selectors to create compound selectors.
Example
In the following example, the :hover pseudo-class selector is used to change the background color of a button when the user hovers over it:
button:hover {
background-color: lightblue;
}
In the HTML code below, the CSS rule will change the background color of the button to lightblue when the user hovers over it:
<button>Hover Over Me</button>
- Pseudo-class selectors are represented by a colon
:followed by the name of the pseudo-class. - Pseudo-class selectors are used to style elements based on their state or position in the document.
- Pseudo-class selectors are less specific than ID selectors and more specific than element selectors.
- Pseudo-class selectors can be combined with other selectors to create compound selectors.
List of Pseudo-Class Selectors
Here is a list of commonly used pseudo-class selectors in CSS:
:active: Selects an element that is being activated by the user.:checked: Selects input elements that are checked.:disabled: Selects input elements that are disabled.:empty: Selects elements that have no children.:enabled: Selects input elements that are enabled.:first-child: Selects the first child of a parent element.:focus: Selects an element that has focus.:hover: Selects an element that is being hovered over by the mouse.:last-child: Selects the last child of a parent element.:link: Selects unvisited links.:not(): Selects elements that do not match a specific selector.:nth-child(): Selects elements based on their position in the document tree.:nth-last-child(): Selects elements based on their position in the document tree, counting from the last child.:nth-of-type(): Selects elements based on their position in the document tree, counting from the first child of a particular type.:nth-last-of-type(): Selects elements based on their position in the document tree, counting from the last child of a particular type.:only-child: Selects elements that are the only child of a parent element.:only-of-type: Selects elements that are the only child of a particular type of a parent element.:target: Selects the target element of the current URL.:visited: Selects visited links.:root: Selects the root element of the document.:lang(): Selects elements based on the language attribute.:focus-within: Selects an element that has focus or contains an element that has focus.:read-only: Selects input elements that are read-only.:read-write: Selects input elements that are read-write.:default: Selects the default button of a form.:indeterminate: Selects input elements that are in an indeterminate state.:placeholder-shown: Selects input elements that are displaying placeholder text.:in-range: Selects input elements that are within a specified range.:out-of-range: Selects input elements that are outside a specified range.:optional: Selects input elements that are optional.:required: Selects input elements that are required.:valid: Selects input elements that are valid.:invalid: Selects input elements that are invalid.:user-invalid: Selects input elements that have been marked as invalid by the user.:user-valid: Selects input elements that have been marked as valid by the user.
Example: Using Pseudo-Class Selectors
Now, let's see an example of using the :hover pseudo-class selector to change the background color of a button when the user hovers over it:
- index.html
- index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<button>Hover Over Me</button>
</body>
</html>
button:hover {
background-color: lightblue;
}
Now, you can see the output of the above code in the Browser Window like this:
In this example, the button:hover pseudo-class selector is used to change the background color of the button to lightblue when the user hovers over it. The button in the HTML code changes its background color to lightblue when the user hovers over it.
Pseudo-class selectors are a powerful feature of CSS that allow you to style elements based on their state or position in the document. By using pseudo-class selectors, you can create interactive and dynamic styles for your web pages.