CSS Reference

pseudo-classes

A pseudo-class is used to define a special state of an element, such as when a user moves mouse over it or when an element gets focus.

November 5, 2022

pseudo-class

pseudo-classes

Example

/* change links color to red on hover */ a { color: black; } a:hover { color: red; }

Pseudo-classes

pseudo-class Description
:active selects the active link
:checked selects every checked <input> element
:disabled selects every disabled <input> element
:empty selects every <p> element that has no children
:enabled selects every enabled <input> element
:first-child selects every <p> elements that is the first child of its parent
:first-of-type selects every <p> element that is the first <p> element of its parent
:focus selects the <input> element that has focus
:hover selects links on mouse over
:in-range selects <input> elements with a value within a specified range
:invalid selects all <input> elements with an invalid value
:lang(language) selects every <p> element with a lang attribute value starting with "it"
:last-child selects every <p> elements that is the last child of its parent
:last-of-type selects every <p> element that is the last <p> element of its parent
:link selects all unvisited links
:not(selector) selects every element that is not a <p> element
:nth-child(n) selects every <p> element that is the second child of its parent
:nth-last-child(n) selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) selects every <p> element that is the second <p> element of its parent
:only-of-type selects every <p> element that is the only <p> element of its parent
:only-child selects every <p> element that is the only child of its parent
:optional selects <input> elements with no "required" attribute
:out-of-range selects <input> elements with a value outside a specified range
:read-only selects <input> elements with a "readonly" attribute specified
:read-write selects <input> elements with no "readonly" attribute
:required selects <input> elements with a "required" attribute specified
:root selects the document's root element
:target selects the current active #news element (clicked on a URL containing that anchor name)
:valid selects all <input> elements with a valid value
:visited selects all visited links

Related Content

Easy Way to Fix Anchor Links Scrolling Too Far

Stories

Easy Way to Fix Anchor Links Scrolling Too Far

Fixed navbar is a very popular way of displaying navigation when a page is scrolled, but you could run into a small detail that needs to be addressed.

How to Avoid Page Flickering When Scrollbars are Dynamically Shown or Hidden?

Stories

How to Avoid Page Flickering When Scrollbars are Dynamically Shown or Hidden?

There are certain cases when you want to dynamically manipulate the page height which will result in flickering.

Changing the Mouse Cursor in CSS With the cursor Property

Stories

Changing the Mouse Cursor in CSS With the cursor Property

Using CSS to change the cursor on your website is a great way to add a little bit of personality to your site.