Pseudo-classes in CSS are used to define special states of elements.
They allow us to style elements based on user interaction, structural position, or certain conditions. Pseudo-classes are denoted by a colon ":".
Selects the first or last child element of its parent.
li:first-child {
font-weight: bold;
}
li:nth-child(odd) {
background-color: black;
}
Selects elements based on their position within their parent.
a:hover {
color: #F5F5F5;
}
a:link {
color: #333;
}
Style links based on their states.
input:focus {
border-color: #F5F5F5;
}
input:disabled {
opacity: 0.2;
}
button:hover {
background-color: #333;
}
input:focus {
border-color: gray;
}
Style form elements based on their states.
span:not(.user-style) {
color: green;
}
p:empty {
display: none;
}
Style elements based on user interaction.
Selects elements that do not match a given selector.
Selects elements that have no children.
Pseudo-classes allow us to apply styles to elements based on various conditions without the need for additional classes or IDs in the HTML.
They are commonly used for styling links, form elements, and interactive elements based on user interaction.
Pseudo-classes can significantly enhance the user experience by providing visual feedback and improving accessibility.