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.
a:link { color: blue; } a:visited { text-decoration: none; }
Example: Click Here
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.
a:hover { color: red; } a:active { color: gray; } a:focus { color: yellow; }
Example: Click Here
These pseudo-classes change how the links are rendered in response to user actions.
:hover applies when a user places cursor over the element, but does not select it.
:active applies when the element is activated or clicked.
:focus applies 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.
ol li:first-child { border-top: none; }
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.
ul li:last-child { border-right: none; }
Example: Click Here
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, …).
table tr:nth-child(2n) td { background: #eee; }
Example: Click Here
Pseudo-classes and CSS Classes
