CSS Pseudo-Class

In this tutorial we will learn about CSS pseudo-class.

pseudo-class

We use pseudo-class to specify state of an element.

Syntax of pseudo-class is given below.

selector:pseudo-class {
	property : value
}

In the following example we have set the rule for the p (paragraph) element. When the mouse hovers on top of it then its color will change to blue.

p:hover {
	color : blue;
}

Class and Pseudo-class

We can also use value of the class attribute and pseudo-class to style the element.

Following is the syntax.

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

In the following example we have set the rule for all the elements having class sample-container. When the mouse hovers on top of it then its color will change to blue.

.sample-container:hover {
	color : blue;
}

Id and Pseudo-class

We can also use value of the id attribute and pseudo-class to style the element.

Following is the syntax.

#id:pseudo-class {
	property : value;
}

In the following example we have set the rule for the element having id user1-container. When the mouse hovers on top of it then its color will change to blue.

#user1-container:hover {
	color : blue;
}

Anchor pseudo-class

There are 4 important states of a link (anchor) and it can be in any one of the state.

• link - when it is unvisited
• visited - when the link has been clicked
• hover - when the mouse is hovering over the link
• active - when the link is being clicked

Click here for CSS Link tutorial.

We can use the above 4 states as pseudo-class for styling the anchor element.

In the following example we have written some style rule to color the anchor text based on the state using pseudo-class.

a:link {
	color : blue;
}

a:visited {
	color : red;
}

a:hover {
	color : green;
}

a:active {
	color : yellow;
}

:checked

We use the :checked pseudo-class to select and style all the checked checkbox, radio input element and option element of select menu.

In the following example the checked input checkbox element will get a right margin.

input[type=checkbox]:checked {
	margin-right : 20px;
}

:disabled

We use the :disabled pseudo-class to select and style the disabled element.

In the following example the background color of the disabled input text element is set to lightgray.

input[type=text]:disabled {
	background-color : lightgray;
}

:enabled

We use the :enabled pseudo-class to select and style the enabled element.

In the following example the background color of the enabled input text element is set to lightyellow.

input[type=text]:enabled {
	background-color : lightyellow;
}

:invalid

We use the :invalid pseudo-class to select and style the elements that have invalid value. For example, if we have an input field for email and it has invalid value then the style will be applied.

In the following example the background color of the input email element having invalid value is set to salmon.

input[type=email]:invalid {
	background-color : salmon;
}

:valid

We use the :valid pseudo-class to select and style the elements that have valid value. For example, if we have an input field for email and it has valid value then the style will be applied.

In the following example the background color of the input email element having valid value is set to lightgreen.

input[type=email]:valid {
	background-color : lightgreen;
}

:optional

We use the :optional pseudo-class to select and style the elements having no required attribute.

In the following example the background color of the input text element is set to lightyellow as it is optional.

input[type=text]:optional {
	background-color : lightyellow;
}

:required

We use the :required pseudo-class to select and style the elements having required attribute.

In the following example the background color of the input text element is set to lightskyblue as it is required.

input[type=text]:required {
	background-color : lightskyblue;
}

:first-child

We use the :first-child pseudo-class to select and style elements that are first child of its parent.

In the following example the background color of all the first child of its parent element is set to lightyellow.

p:first-child {
	background-color : lightyellow;
}

:last-child

We use the :last-child pseudo-class to select and style elements that are last child of its parent.

In the following example the background color of all the last child of its parent element is set to lightyellow.

p:last-child {
	background-color : lightyellow;
}

:nth-child()

We use the :nth-child(X) pseudo-class to select and style elements that is the Xth child of its parent.

In the following example the background color of the 2nd child of its parent element is set to lightyellow.

p:nth-child(2) {
	background-color : lightyellow;
}

:nth-last-child()

We use the :nth-last-child(X) pseudo-class to select and style elements that is the Xth child of its parent from last.

In the following example the background color of the 2nd child of its parent element from the last is set to lightyellow.

p:nth-last-child(2) {
	background-color : lightyellow;
}

:focus

We use the :focus pseudo-class to select and style elements that is in focus.

In the following example the background color of the element in focus is set to lightgreen.

input[type=text]:focus {
	background-color : lightgreen;
}

:hover

We use the :hover pseudo-class to select and style elements when mouse is over it.

In the following example the background color of the element over which mouse is hovering is set to lightgreen.

input[type=text]:hover {
	background-color : lightgreen;
}