CSS Pseudo-classes
A CSS pseudo-class selector matches components based on an additional condition and not necessarily defined by the document tree.
What is Pseudo-class
The CSS pseudo-classes allow you to style the dynamic states of an element such as hover, active and focus state, as well as elements that are existing in the document tree but can’t be targeted via the use of other selectors without adding any IDs or classes to them, for example, targeting the first or last child elements.
A pseudo-class starts with a colon (:). Its syntax can be given with:
selector : pseudo-class { property: value; }
The following section describes the most commonly used pseudo-classes.
Anchor Pseudo-classes
Using anchor pseudo-classes links can be displayed in different ways:
These pseudo-classes let you style unvisited links differently from visited ones. The most common styling technique is to remove underlines from visited links.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Anchor Pseudo-classes</title>
<style>
a:link {
color: blue;
}
a:visited {
text-decoration: none;
}
</style>
</head>
<body>
<p>Visit <a href="https://www.themakpro.com" target="_blank">www.themakpro.com</a></p>
</body>
</html>
Some anchor pseudo-classes are dynamic — they’re applied as a result of user interaction with the document like on hover, or on focus etc.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Dynamic Anchor Pseudo-classes</title>
<style>
a:link {
color: blue;
}
a:visited {
text-decoration: none;
}
a:hover {
color: red;
}
a:active {
color: gray;
}
a:focus {
color: yellow;
}
</style>
</head>
<body>
<p>Visit <a href="www.themakpro.com" target="_blank">www.themakpro.com</a></p>
</body>
</html>
These pseudo-classes change how the links are rendered in response to user actions.
:hoverapplies when a user places cursor over the element, but does not select it.:activeapplies when the element is activated or clicked.:focusapplies when the element has keyboard focus.
Note: To make these pseudo-classes work perfectly, you must define them in the exact order —
:link,:visited,:hover,:active,:focus.
The :first-child Pseudo-class
The :first-child pseudo-class matches an element that is the first child element of some other element. The selector ol li:first-child in the example below select the first list item of an ordered list and removes the top border form it.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS :first-child Pseudo-class</title>
<style>
ol{
padding: 0;
list-style: none;
}
ol li{
padding: 10px 0;
border-top: 1px solid #000000;
}
li:first-child {
border-top: none;
}
</style>
</head>
<body>
<h1>Sample Ordered Lists</h1>
<ol>
<li>Mix ingredients</li>
<li>Bake in oven for an hour</li>
<li>Allow to stand for ten minutes</li>
</ol>
<p><strong>Note:</strong> To make <code>:first-child</code> to work in IE8 and earlier, a <code><!DOCTYPE></code> must be declared at the top of document.</p>
</body>
</html>
Note: To make :first-child to work in Internet Explorer 8 and earlier versions, a <!DOCTYPE> must be declared at the top of document.
The :last-child Pseudo-class
The :last-child pseudo-class matches an element that is the last child element of some other element. The selector ul li:last-child in the example below select the last list item from an unordered list and removes the right border from it.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS :first-child Pseudo-class</title>
<style>
ul{
padding: 0;
list-style: none;
}
ul li{
display: inline;
padding: 0 20px;
border-right: 1px solid #000000;
}
li:last-child {
border-right: none;
}
</style>
</head>
<body>
<h1>Sample Navigation Bar</h1>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
<p><strong>Note:</strong> To make <code>:first-child</code> to work in IE8 and earlier, a <code><!DOCTYPE></code> must be declared at the top of document.</p>
</body>
</html>
Note: The CSS
:last-childselector does not work in Internet Explorer 8 and earlier versions. Supports in Internet Explorer 9 and above.
The :nth-child Pseudo-class
The CSS3 introduces a new :nth-child pseudo-class that allows you to target one or more specific children of a given parent element. The basic syntax of this selector can be given with :nth-child(N), where N is an argument, which can be a number, a keyword (even or odd), or an expression of the form xn+y where x and y are integers (e.g. 1n, 2n, 2n+1, …).
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS :nth-child Pseudo-class</title>
<style>
table{
margin: 30px;
border-collapse: collapse;
}
table tr{
border-bottom: 1px solid #666;
}
table tr th, table tr td{
padding: 10px;
}
table tr:nth-child(2n) td{
background: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
<tr>
<td>4</td>
<td>Harry</td>
<td>Potter</td>
<td>harrypotter@mail.com</td>
</tr>
</table>
</body>
</html>
The style rules in the example above simply highlight the alternate table row, without adding any IDs or classes to the <table> elements.
Tip: The CSS
:nth-child(N)selector is very useful in the situations where you have to select the elements that appears inside the document tree in a specific interval or pattern like at even or odd places, etc.
The :lang Pseudo-class
The language pseudo-class :lang allows constructing selectors based on the language setting for specific tags. The :lang pseudo-class in the example below defines the quotation marks for <q> elements that are explicitly given a language value of no.
Example
<!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>Some text <q lang="no">A quote in a paragraph</q> Some text.</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 <code><!DOCTYPE></code> is specified.</p>
</body>
</html>
Note: Internet Explorer up to version 7 does not support the :lang pseudo-class. IE8 supports only if a <!DOCTYPE> is specified.
Pseudo-classes and CSS Classes
Pseudo-classes can be combined with CSS classes.
The link with class="red", in the example below will be displayed in red.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Using CSS Pseudo-classes with Selectors</title>
<style>
a.red:link {
color: #ff0000;
}
</style>
</head>
<body>
<p>
<a href="#">Click me</a>
<br>
<a href="#" class="red">Click me</a>
</p>
</body>
</html>