The CSS pseudo-classes enable you to style different states of an element, like hover, active, and focus states. They also allow targeting elements in the document tree without needing to add IDs or classes to them, for instance, selecting the first or last child elements.
A pseudo-class begins with a colon (:). Its structure can be represented as:
The following section outlines the most commonly used pseudo-classes.
With anchor pseudo-classes, links can be styled differently:
These pseudo-classes allow you to style unvisited links differently from visited ones. A common styling approach is to remove underlines from visited links.
a:link {
color: blue;
}
a:visited {
text-decoration: none;
}Some anchor pseudo-classes are dynamic — they're applied based on user interaction with the document, like hover or focus, etc.
a:hover {
color: red;
}
a:active {
color: gray;
}
a:focus {
color: yellow;
}These pseudo-classes alter how the links are displayed in response to user actions.
:hover is applied when a user hovers over the element but doesn't select it.:active is applied when the element is clicked or activated.:focus is applied when the element has keyboard focus.Note: For these pseudo-classes to work correctly, you need to define them in the specific order: :link, :visited, :hover, :active, :focus.
The :first-child pseudo-class matches an element that is the initial child element of another element. For example, the selector ol li:first-child in the following example targets the first list item in an ordered list and removes its top border.
ol li:first-child {
border-top: none;
}Note: To make :first-child work in Internet Explorer 8 and earlier versions, you need to declare a <!DOCTYPE> at the top of the document.
The :last-child pseudo-class selects an element that is the final child element of another element. For instance, the selector ul li:last-child in the example below targets the last list item in an unordered list and removes its right border.
ul li:last-child {
border-right: none;
}Note: The CSS :last-child selector doesn't function in Internet Explorer 8 and earlier versions. It's supported in Internet Explorer 9 and later versions.
CSS3 introduces the :nth-child pseudo-class, allowing you to target specific children of a parent element. The basic syntax of this selector is :nth-child(N), where N can be a number, a keyword like even or odd, or an expression like xn+y where x and y are integers (e.g., 1n, 2n, 2n+1, and so on).
table tr:nth-child(2n) td {
background: #eee;
}In the above example, the style rules highlight alternate table rows without needing to add any IDs or classes to the <table> elements.
Tip: The CSS :nth-child(N) selector is handy when you need to select elements in a specific pattern within the document tree, such as at even or odd positions.
The language pseudo-class :lang allows you to construct selectors based on the language setting for specific tags. In the example below, the :lang pseudo-class defines the quotation marks for <q> elements explicitly set with a language value of no.
q:lang(no) {
quotes: "~" "~";
}
/* HTML code snippet */
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>Note: Internet Explorer up to version 7 doesn't support the :lang pseudo-class. IE8 supports it only if a <!DOCTYPE> is specified.
Pseudo-classes can be combined with CSS classes.
In the example below, the link with class="red" will be displayed in red.
a.red:link { /* style rule */
color: #ff0000;
}
<a class="red" href="#">Click me</a> /* HTML code snippet */