Pseudo-classes
Quick Summary for Pseudo-classes
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it.
Code Usage for Pseudo-classes
/* Any button over which the user's pointer is hovering */ button:hover {   color: blue; } 
More Details for Pseudo-classes

Pseudo-classes

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it.

/* Any button over which the user's pointer is hovering */ button:hover {   color: blue; } 

Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).

Note: In contrast to pseudo-classes, pseudo-elements can be used to style a specific part of an element.

Linguistic pseudo-classes

These pseudo-classes reflect the document language, and enable the selection of elements based on language or script direction.

:dir

The directionality pseudo-class selects an element based on its directionality as determined by the document language.

:lang

Select an element based on its content language.

Location pseudo-classes

These pseudo-classes relate to links, and to targeted elements within the current document.

:any-link

Matches an element if the element would match either :link or :visited.

:link

Matches links that have not yet been visited.

:visited

Matches links that have been visited.

:local-link

Matches links whose absolute URL is the same as the target URL, for example anchor links to the same page.

:target

Matches the element which is the target of the document URL.

:target-within

Matches elements which are the target of the document URL, but also elements which have a descendant which is the target of the document URL.

:scope

Represents elements that are a reference point for selectors to match against.

User action pseudo-classes

These pseudo-classes require some interaction by the user in order for them to apply, such as holding a mouse pointer over an element.

:hover

Matches when a user designates an item with a pointing device, for example holding the mouse pointer over it.

:active

Matches when an item is being activated by the user, for example clicked on.

:focus

Matches when an element has focus.

:focus-visible

Matches when an element has focus and the user agent identifies that the element should be visibly focused.

:focus-within

Matches an element to which :focus applies, plus any element that has a descendant to which :focus applies.

Time-dimensional pseudo-classes

These pseudo-classes apply when viewing something which has timing, such as a WebVTT caption track.

:current

Represents the element or ancestor of the element that is being displayed.

:past

Represents an element that occurs entirely before the :current element.

:future

Represents an element that occurs entirely after the :current element.

Resource state pseudo-classes

These pseudo-classes apply to media that is capable of being in a state where it would be described as playing, such as a video.

:playing

Represents a media element that is capable of playing when that element is playing.

:paused

Represents a media element that is capable of playing when that element is paused.

The input pseudo-classes

These pseudo-classes relate to form elements, and enable selecting elements based on HTML attributes and the state that the field is in before and after interaction.

:autofill

Matches when an <input> has been autofilled by the browser.

:enabled

Represents a user interface element that is in an enabled state.

:disabled

Represents a user interface element that is in a disabled state.

:read-only

Represents any element that cannot be changed by the user.

:read-write

Represents any element that is user-editable.

:placeholder-shown

Matches an input element that is displaying placeholder text, for example from the HTML5 placeholder attribute.

:default

Matches one or more UI elements that are the default among a set of elements.

:checked

Matches when elements such as checkboxes and radiobuttons are toggled on.

:indeterminate

Matches when UI elements are in an indeterminate state.

:blank

Matches a user-input element which is empty, containing an empty string or other null input.

:valid

Matches an element with valid contents. For example an input element with type 'email' which contains a validly formed email address.

:invalid

Matches an element with invalid contents. For example an input element with type 'email' with a name entered.

:in-range

Applies to elements with range limitations, for example a slider control, when the selected value is in the allowed range.

:out-of-range

Applies to elements with range limitations, for example a slider control, when the selected value is outside the allowed range.

:required

Matches when a form element is required.

:optional

Matches when a form element is optional.

:user-invalid

Represents an element with incorrect input, but only when the user has interacted with it.

Tree-structural pseudo-classes

These pseudo-classes relate to the location of an element within the document tree.

:root

Represents an element that is the root of the document. In HTML this is usually the <html> element.

:empty

Represents an element with no children other than white-space characters.

:nth-child

Uses An+B notation to select elements from a list of sibling elements.

:nth-last-child

Uses An+B notation to select elements from a list of sibling elements, counting backwards from the end of the list.

:first-child

Matches an element that is the first of its siblings.

:last-child

Matches an element that is the last of its siblings.

:only-child

Matches an element that has no siblings. For example a list item with no other list items in that list.

:nth-of-type

Uses An+B notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements.

:nth-last-of-type

Uses An+B notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements counting backwards from the end of the list.

:first-of-type

Matches an element that is the first of its siblings, and also matches a certain type selector.

:last-of-type

Matches an element that is the last of its siblings, and also matches a certain type selector.

:only-of-type

Matches an element that has no siblings of the chosen type selector.

Syntax

selector:pseudo-class {   property: value; } 

Like regular classes, you can chain together as many pseudo-classes as you want in a selector.

Alphabetical index

Pseudo-classes defined by a set of CSS specifications include the following:

A

:active :any-link :autofill

B

:blank

C

:checked :current

D

:default :defined :dir() :disabled

E

:empty :enabled

F

:first :first-child :first-of-type :fullscreen :future :focus :focus-visible :focus-within

H

:has() :host :host() :host-context() :hover

I

:indeterminate :in-range :invalid :is()

L

:lang() :last-child :last-of-type :left :link :local-link

N

:not() :nth-child() :nth-col() :nth-last-child() :nth-last-col() :nth-last-of-type() :nth-of-type()

O

:only-child :only-of-type :optional :out-of-range

P

:past :picture-in-picture :placeholder-shown :paused :playing

R

:read-only :read-write :required :right :root

S

:scope :state()

T

:target :target-within

U

:user-invalid

V

:valid :visited

W

:where()

Specifications

Specification
HTML Standard # pseudo-classes
Selectors Level 4
CSS Basic User Interface Module Level 4

See also

Pseudo-elements

Last modified: Feb 22, 2022, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体)正體中文 (繁體) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote

“Make no mistake: This is not your diary. You are not letting it all hang out. You are picking and choosing every single word.”


Dani Shapiro
Random CSS Property

rotateZ()

The rotateZ() CSS function defines a transformation that rotates an element around the z-axis without deforming it. Its result is a <transform-function> data type.
rotateZ() css reference