The CSS pseudo-class selector matches components on the basis of an additional condition and is not necessarily specified by the document tree.
The pseudo-classes enable you to style an element's dynamic states like active, hover, and focus state and the elements that already exist in the document tree but can't be targeted by using other selectors without adding any classes or IDs to them—for example, targeting the first child or last child elements.
A pseudo-class begins with a colon (:). You can give its syntax with:
selector:pseudo-class { property: value; }
You can use anchor pseudo-classes to display links in different ways:
You can use these pseudo-classes to style unvisited links in a different way from visited ones. The commonly used styling technique is to remove underlines from visited links..
Example :
a:link {
color: blue;
}
a:visited {
text-decoration: none;
}
A few anchor pseudo-classes are dynamic and applied as a result of the user's interaction with the document, such as on focus, hover, etc.
Example :
a:hover {
color: red;
}
a:active {
color: gray;
}
a:focus {
color: yellow;
}
These pseudo-classes change how the links are generated in response to user actions.
Note: For making these pseudo-classes work flawlessly, these must be defined in precisely this order — :link, :visited, :hover, :active, :focus.
It matches an element which is the first child element of another element. So, in the example below, the selector ol li:first-child will select the first list item of an ordered list and will remove the top border from it.
Example :
ol li:first-child {
border-top: none;
background-color:#48CEAD;
}
Note: You must declare a <!DOCTYPE> at the document's top to make :first-child to work in Internet Explorer 8 and earlier versions.
It matches an element which is the last child element of another element. So, in the example below, the selector ul li:last-child will select the last list item from an unordered list and will remove the right border from it.
Example :
ul li:last-child { border-right: none; }
Note: The CSS :last-child pseudo-class selector does not work in Internet Explorer 8 and earlier versions. It is supported in Internet Explorer 9 and above.
The CSS3 introduces A new :nth-child pseudo-class has been introduced by CSS3 that enables you to target a given parent element's one or more specific children. You can provide the basic syntax of this selector with :nth-child(N), where N is an argument, it can be a keyword (even or odd), a number, or an expression in the form xn+y, in which x and y are integers (e.g., 2n, 1n, 2n+1, …).
Example :
table tr:nth-child(2n) td {
background: #f2f2f2;
}
In the example mentioned above, the style rules simply highlight the alternate table row without adding any classes or IDs to the <table> elements.
Tip: The CSS :nth-child(N) pseudo-class selector is helpful when selecting the elements that appear inside the document tree in a specific pattern or interval like at odd or even places, etc.
The language pseudo-class :lang lets you construct selectors on the basis of the language setting for specific tags. In the example below, the :lang pseudo-class defines the quotation marks for <q> elements explicitly given a language value of no.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS :lang Pseudo-class</title>
<style>
q:lang(no) {
quotes:"~" "~";
}
</style>
</head>
<body>
<p>Remember <q lang="no">When you have a dream, you've got to grab it and never let go</q> by Carol Burnett</p>
<p><strong>Note:</strong> Internet Explorer 8 and earlier version don't support the <code>:lang</code> pseudo-class. IE8 supports only if a DOCTYPE is specified.</p>
</body>
</html>
Note: The :lang pseudo-class is not supported by Internet Explorer up to version 7. Internet Explorer 8 supports it only if a <!DOCTYPE> is specified.
You can combine pseudo-classes with CSS classes.
The link with class="red" will be displayed in red in the example below.
Example :
a.red:link { /* style rule */
color: #ff0000;
}
<a class="red" href="#">Click me</a> /* HTML code snippet */