CSS Pseudo-classes

CSS pseudo-classes are used to add special effects to some selectors.

Syntax

Pseudo-class syntax

selector:pseudo-class {property:value;}

CSS classes can also use pseudo-classes:

selector.class:pseudo-class {property:value;}

Anchor pseudo-classes

In browsers that support CSS, different states of links can be displayed in different ways.

Example

a:link {color:#FF0000;} /*Unvisited link*/ a:visited {color:#0080FF;} /*Visited link*/ a:hover {color:#FF00FF;} /*Mouse over link*/ a:active {color:#0000FF;} /*Selected link*/

Try it Yourself »

Note:In CSS definitions, a:hover must be placed after a:link and a:visited to be valid.

Note:In CSS definitions, a:active must be placed after a:hover to be valid.

Note:The names of pseudo-classes are case-insensitive.

Pseudo-classes and CSS classes

Pseudo-classes can be used together with CSS classes:

a.red:visited {color:#FF0000;} <a class="red" href="css-syntax.html">CSSSyntax </a>

If the link in the above example has been visited, it will be displayed in red.

CSS :first-child Pseudo-class

You can use the :first-child pseudo-class to select the first child element of a parent element.

Note:Must be declared in versions before IE8<!DOCTYPE>, so that :first-child can take effect.

Matches the first <p> element

In the following example, the selector matches <p> elements that are the first child of any element:

Example

p:first-child { color:blue; }

Try it Yourself »

Matches the first <i> element in all <p> elements.

In the following example, the selector matches the first <i> element in all <p> elements:

Example

p > i:first-child { color:blue; }

Try it Yourself »

Matches all <i> elements in <p> elements that are the first child.

In the following example, the selector matches all <i> elements in <p> elements that are the first child of an element:

Example

p:first-child i { color:blue; }

Try it Yourself »

CSS - :lang Pseudo-class

The :lang pseudo-class gives you the ability to define special rules for different languages.

Note:IE8 must declare<!DOCTYPE>to support the :lang pseudo-class.

In the following example, the :lang class defines the type of quotation marks for q elements with an attribute value of no:

Example

q:lang(no) {quotes: "~" "~";}

Try it Yourself »

Examples

More Examples

Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.

Using :focus
This example demonstrates how to use the :focus pseudo-class.

All CSS Pseudo-classes/Elements

Selector Example Example Description
:checked input:checked Selects all selected form elements
:disabled input:disabled Selects all disabled form elements
:empty p:empty Selects all <p> elements with no children
:enabled input:enabled Selects all enabled form elements
:first-of-type p:first-of-type Selects each p element that is the first p element of its parent element.
:in-range input:in-range Selects values within a specified range of elements
:invalid input:invalid Selects all invalid elements
:last-child p:last-child Selects the last child element of all p elements.
:last-of-type p:last-of-type Selects each p element that is the last p element of its parent element.
:not(selector) :not(p) Selects all elements except <p>
:nth-child(n) p:nth-child(2) Selects the second child element of the parent element of all p elements.
:nth-last-child(n) p:nth-last-child(2) Selects the second-to-last child element of all p elements.
:nth-last-of-type(n) p:nth-last-of-type(2) Selects the second-to-last p child element of all p elements.
:nth-of-type(n) p:nth-of-type(2) Selects the second p child element of all p elements.
:only-of-type p:only-of-type Selects all elements that have only one child element that is a p element.
:only-child p:only-child Selects all p elements that have only one child element.
:optional input:optional Selects element attributes without "required".
:out-of-range input:out-of-range Selects element attributes whose value is outside the specified range.
:read-only input:read-only Selects elements with a read-only attribute
:read-write input:read-write Selects elements without a read-only attribute
:required input:required Selects element attributes that have the "required" attribute specified.
:root root Selects the root element of the document
:target #news:target Selects the currently active #news element (when the clicked URL contains the anchor name).
:valid input:valid Selects all attributes with valid values
:link a:link Selects all unvisited links
:visited a:visited Selects all visited links
:active a:active Selects the active link
:hover a:hover The state when the mouse hovers over a link
:focus input:focus Selects elements that have focus after input
:first-letter p:first-letter Selects the first letter of each <p> element.
:first-line p:first-line Selects the first line of each <p> element
:first-child p:first-child The selector matches <p> elements that are the first child of any element.
:before p:before Inserts content before each <p> element
:after p:after Inserts content after each <p> element
:lang(language) p:lang(it) Selects a starting value for the lang attribute of <p> elements.
other extensions