CSS Pseudo-Classes


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


Grammar

Syntax of pseudo-classes:

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:#00FF00;} /* Visited link */
a:hover {color:#FF00FF;} /* mouse over the link */
a:active {color:#0000FF;} /* selected link */

 Try It! 

Note: In the CSS definition, a:hover must be placed after a:link and a:visited to be effective.

Note: In the CSS definition, a:active must be placed after a:hover to be effective.

Note: The names of pseudo-classes are not case sensitive.


Pseudo-classes and CSS classes

Pseudo-classes can be used in conjunction with CSS classes:

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

If the link in the example above 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 the parent element.

Note: <!DOCTYPE> must be declared in the previous version of IE8 , so that: first-child can take effect.

Match The First <p> Element

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

Example

p:first-child
{
    color:blue;
}

 Try It! 


Match The First <i> Element in All <p> Elements

In the following example, the first <i> element of all matched <p> elements is selected:

Example

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

 Try It! 


Match All <i> Elements in All <p> Elements That Are The First Child Element

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

Example

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

 Try It! 


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 the q element whose attribute value is no:

Example

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

 Try It! 


Examples

More Examples

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

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


CSS pseudo-classes / elements

SelectorExampleDescription
:checkedinput:checkedSelect all selected form elements
:disabledinput:disabledSelect all disabled form elements
:emptyp:emptySelect all p elements that have no child elements
:enabledinput:enabledSelect all enabled form elements
:first-of-typep:first-of-typeEach p element selected is the first p element of its parent element
:in-rangeinput:in-rangeSelect the value in the specified range of the element
:invalidinput:invalidSelect all invalid elements
:last-childp:last-childSelect the last child element of all p elements
:last-of-typep:last-of-typeSelect each p element to be the last p element of its parent element
:not(selector):not(p)Select all elements other than p
:nth-child(n)p:nth-child(2)Select the second child element of the parent element of all p elements
:nth-last-child(n)p:nth-last-child(2)Select the second child element from the bottom of all p elements
:nth-last-of-type(n)p:nth-last-of-type(2)Select the second child element of p from the bottom of all p elements
:nth-of-type(n)p:nth-of-type(2)Select all p elements and the second child element of p
:only-of-typep:only-of-typeSelect all elements with only one child element as p
:only-childp:only-childSelect all p elements that have only one child element
:optionalinput:optionalSelect element attributes without "required"
:out-of-rangeinput:out-of-rangeSelect element attributes with values outside the specified range
:read-onlyinput:read-onlySelect element attributes of read-only attributes
:read-writeinput:read-writeSelect element attributes without read-only attributes
:requiredinput:requiredSelect the element attribute specified by the "required" attribute
:rootrootSelect the root element of the document
:target#news:targetSelect the currently active #news element (click on the URL to include the name of the anchor)
:validinput:validSelect all attributes with valid values
:linka:linkSelect all unvisited links
:visiteda:visitedSelect all visited links
:activea:activeSelect the active link
:hovera:hoverThe state of putting the mouse on the link
:focusinput:focusSelect element to have focus after input
:first-letterp:first-letterSelect the first letter of each <p> element
:first-linep:first-lineSelect the first line of each <p> element
:first-childp:first-childThe selector matches the <p> element belonging to the first child element of any element
:beforep:beforeInsert content before each <p> element
:afterp:afterInsert content after each <p> element
:lang(language)p:lang(it)Choose a starting value for the lang attribute of the <p> element