CSS Pseudo-classes

❮ Previous Home Next ❯

What is Pseudo-classes?

The CSS pseudo-classes allow you to style the dynamic states of an element.




Uses of Pseudo-class




Standard Syntax

selector:pseudo-class {
  property: value;
}

A pseudo-class starts with a colon (:).




Anchor Pseudo-classes

You can use pseudo-classes to change links style.

Styling unvisited, visited, hover, and active links:

Example

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: yellow;
}

/* mouse over link */
a:hover {
  color: black;
}

/* selected link */
a:active {
  color: pink;
}

Note: To make these pseudo-classes work perfectly, you must define them in the exact order:

  1. :link
  2. :visited
  3. :hover
  4. :active
  5. :focus




The Pseudo-classes with HTML Classes

The CSS Pseudo-classes can be combined with HTML classes.

The following example will change color and background color on hovering element:

Example

.example:hover {
  color: red;
  background-color: yellow;
}



The :first-child Pseudo-class

The :first-child pseudo-class matches an element that is the first child element of some other element.

The following example select first child of <li> and set background color to green:

Example

li:first-child {
background: green;
}






The :last-child Pseudo-class

The :last-child pseudo-class matches an element that is the last child element.

The example below select the last paragraph:

Example

p:last-child {
  background: red;
}



The :nth-child Pseudo-class

The :nth-child pseudo-class that allows you to target one or more specific children of a given parent element.

Possible value can be:

Example

/* sets the background color to red if the p element is its parent's second child */
p:nth-child(2) {
  background-color: red;
}



The :lang Pseudo-class

The :lang pseudo-class allows constructing selectors based on the language setting for specific tags.

The following example select on the base of language-code:

Example

/* English */
:lang(en) {
  color: red;
}

/* French */
:lang(fr) {
  color: green;
}

/* Hindi */
:lang(hi) {
  color: pink;
}



All CSS Pseudo Classes Properties

Property Description
:active Specifies the link has been clicked(active link).
:any-link Acts as the source anchor of a hyperlink.
:any() Selects any element that can be selected by one of the selectors in that list.
:blank Selects empty user input elements
:checked Selects the elements that are checked.
.class Selects all tags with the specified class value.
:default Selects the elements that are the default among a set of similar elements.
:dir Selector matches elements based on the directionality of the text contained in them.
:disabled Selects the elements that are currently disabled.
:empty Selects an element that has no children.
:enabled Selects the elements that are currently enabled.
:first Represents the first page of a printed document.
:first-child Represents the first element among a group of sibling elements.
:first-of-type Represents the first element of its type among a group of sibling elements.
:focus Matches any element that has keyboard input focus.
:focus-visible Applies while an element matches the :focus pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element.
:focus-within Matches an element if the element or any of its descendants are focused.
:fullscreen Matches every element which is currently in fullscreen mode.
:hover Matches when the user interacts with an element with a pointing device, but does not necessarily activate it.
:in-range selector represents an <input> element whose current value is within the range limits specified by the min and max attributes.
:indeterminate Represents any form element whose state is indeterminate.
:invalid Selects any <form>, <fieldset>, <input> or other <form> element whose contents fail to validate.
:is Selects any element that can be selected by one of the selectors in that list.
:lang Selects elements based on the language they are determined to be in.
:last-child Selects the element that is the last child of its parent.
:last-of-type Selects the element that is the last child of its parent that is of its type.
:left Sets page layout rules for a left-hand page when printing.
:link Specifies the unvisited link.
:matches Selects any element that can be selected by one of the selectors in that list.
:not Selects elements that do not match the element/selector.
:nth-child Selects the element that is the nth child of its parent.
:nth-last-child Selects the element that is the nth from last child of its parent.
:nth-last-of-type Selects the element that is the nth-from-last child of its parent that is its type.
:nth-of-type Selects the element that is the nth child of its parent that is its type.
:only-child Selects an element if it’s the only child of its parent.
:only-of-type Selects an element if it’s the only child of its parent with its type.
:optional Selects <input> , <select>, or <textarea> element that does not have the required attribute set on it.
:out-of-range Represents an <input> element whose current value is out of the range limits specified by the min and max attributes.
:placeholder-shown Selects <input> or <textarea> element that is currently displaying placeholder text.
:read-only Selects an element that is not editable by the user.
:read-write Selects an element that is editable by the user.
:required Selects <input> , <select>, or <textarea> element that has the required attribute set on it.
:right Sets page layout rules for a right-hand page when printing.
:root Selects the root element of a tree representing the document.
:target Selects a unique element (the target element) with an id matching the URL's fragment.
:valid Selects <input> or <form> element whose contents validate successfully.
:visited Specifies the link after being pressed.
:where Selects any element that can be selected by one of the selectors in that list.
❮ Previous Home Next ❯