Pseudo-classes in CSS
What are pseudo-classes?
A pseudo-class is a special keyword that you can add to a selector in CSS to target an element based on its state or interaction with the user. For example, you can use a pseudo-class to style a link differently when the user hovers over it, clicks on it, or has visited it before.
Pseudo-classes are different from regular classes, which are attributes that you can assign to an element in HTML to group and style them. Pseudo-classes do not require any changes to the HTML markup, and can be applied to any element that matches the criteria of the pseudo-class.
How to use pseudo-classes?
The syntax of pseudo-classes is:
selector:pseudo-class {
property: value;
}
The selector can be any valid CSS selector, such as an element, a class, an id, an attribute, or a combination of them. The pseudo-class is preceded by a colon (:), and followed by the name of the pseudo-class. For example, the pseudo-class :hover can be used to select an element when the user's pointer is over it.
Some pseudo-classes can also take arguments inside parentheses, such as :nth-child(n)`, which selects the nth child of an element. The arguments can be numbers, keywords, or expressions, depending on the pseudo-class.
Examples of pseudo-classes
There are many pseudo-classes in CSS, and they can be grouped into different categories based on their functionality. Here are some common examples of pseudo-classes, and how they can be used to style elements.
User action pseudo-classes
These pseudo-classes select elements based on their interaction with the user, such as hovering, clicking, focusing, or selecting.
:hover: Selects an element when the user's pointer is over it. For example, you can change the color of a link when the user hovers over it:
a:hover {
color: blue;
}
:active: Selects an element when it is being activated by the user, such as clicking or tapping. For example, you can change the background color of a button when the user clicks on it:
button:active {
background-color: green;
}
:visited: Selects a link that has been visited by the user. For example, you can change the color of a visited link to gray:
a:visited {
color: gray;
}
:focus: Selects an element that has received focus, such as by clicking or using the keyboard. For example, you can add a border to an input field when the user focuses on it:
input:focus {
border: 2px solid red;
}
:target: Selects an element that is the target of the current URL fragment. For example, you can highlight a section of a document when the user scrolls to it using a link with a hash (#):
section:target {
background-color: yellow;
}
Structural pseudo-classes
These pseudo-classes select elements based on their position or relationship in the document tree, such as the first child, the last child, the nth child, or the only child.
:first-child: Selects an element that is the first child of its parent. For example, you can change the font size of the first paragraph in a div:
div p:first-child {
font-size: 20px;
}
:last-child: Selects an element that is the last child of its parent. For example, you can change the font weight of the last list item in an unordered list:
ul li:last-child {
font-weight: bold;
}
:nth-child(n): Selects an element that is the nth child of its parent, where n can be a number, a keyword, or an expression. For example, you can change the color of every odd row in a table:
tr:nth-child(odd) {
background-color: lightgray;
}
:only-child: Selects an element that is the only child of its parent. For example, you can center an image that is the only child of a div:
div img:only-child {
display: block;
margin: auto;
}
Logical pseudo-classes
These pseudo-classes select elements based on a logical condition, such as negation, matching, or containing.
:not(selector): Selects an element that does not match the given selector. For example, you can change the color of all paragraphs except the ones with a class of "intro":
p:not(.intro) {
color: green;
}
:matches(selector1, selector2, ...): Selects an element that matches any of the given selectors. For example, you can change the font family of all headings:
:matches(h1, h2, h3, h4, h5, h6) {
font-family: Arial, sans-serif;
}
:has(selector): Selects an element that has a descendant that matches the given selector. For example, you can change the background color of a div that has an image inside it:
div:has(img) {
background-color: pink;
}
Form pseudo-classes
These pseudo-classes select form elements based on their state or value, such as checked, enabled, disabled, valid, or invalid.
:checked: Selects an element that is checked, such as a checkbox or a radio button. For example, you can change the border color of a checked checkbox:
input[type=checkbox]:checked {
border: 2px solid blue;
}
:enabled: Selects an element that is enabled, meaning that it can be interacted with by the user. For example, you can change the opacity of an enabled button:
button:enabled {
opacity: 1;
}
:disabled: Selects an element that is disabled, meaning that it cannot be interacted with by the user. For example, you can change the cursor of a disabled button:
button:disabled {
cursor: not-allowed;
}
:valid: Selects an element that has a valid value, according to the type or constraints of the element. For example, you can change the border color of a valid email input:
input[type=email]:valid {
border: 2px solid green;
}
:invalid: Selects an element that has an invalid value, according to the type or constraints of the element. For example, you can change the border color of an invalid email input:
input[type=email]:invalid {
border: 2px solid red;
}
Conclusion
Pseudo-classes are a powerful feature of CSS that allow you to style elements based on their state or interaction with the user, without modifying the HTML markup. Pseudo-classes can be combined with other selectors, chained, or nested to create more specific or complex selectors. Pseudo-classes can be used to create dynamic or interactive effects, such as changing the appearance of an element when the user hovers over it, clicks on it, or selects it.
However, pseudo-classes also have some limitations and challenges. Not all pseudo-classes are supported by all browsers, so you may need to check the browser compatibility or use fallbacks or polyfills. Pseudo-classes also have different levels of specificity, which may affect the cascade or inheritance of the styles. Pseudo-classes may also conflict or overlap with other selectors or styles, so you may need to use the cascade order, the specificity, or the !important declaration to resolve them.
Here are some tips or best practices for using pseudo-classes in CSS:
- Use the correct syntax and format of pseudo-classes, and make sure they are preceded by a colon (:).
- Use the most appropriate pseudo-class for your purpose, and avoid using unnecessary or redundant pseudo-classes.
- Use pseudo-classes sparingly and wisely, and avoid overusing or abusing them.
- Test your pseudo-classes on different browsers and devices, and check the browser compatibility or use fallbacks or polyfills if needed.
- - Use the cascade order, the specificity, or the
!importantdeclaration to resolve any conflicts or overlaps with other selectors or styles.