CSS - Pseudo Classes

Pseudo-classes in CSS are used to select and style elements based on their state or position within the document tree, without the need for adding extra classes or JavaScript.

For Example, pseudo-class can be used to change color of element when mouse is hovered over it or Click a button to change color.

Example iframe for Pseudo-Class property

Hover over me!Click me!

Table of Contents

What is Pseudo-class?Pseudo-Class HoverPseudo-Class ActivePseudo-Class FocusPseudo-Class nth ChildPseudo-Class First-ChildPseudo-Class Last-ChildPseudo-Class LangPseudo-Class notList of CSS Pseudo Classes

What is Pseudo-class?

• Pseudo-classes often used along withCSS Selectorsby inserting a colon (:) after selector. For examplea : hover{}, Here selectorawill selects all the anchor tags in document.
• A functional pseudo-class contains a pair of parentheses to define the arguments. For example::lang(en).
• The element to which a pseudo-class is attached, is termed as an anchor element. For example:button:hover, a:focus,etc. Here button and a elements are called the anchor elements.
• Pseudo-classes apply style to an element as per the content of the document tree.
• Pseudo-classes also apply a style to an element in relation to the external factors, such as history of the navigation of the element (:visited), status of the content (:checked), or position of mouse (:hover)

Syntax

selector:pseudo-class {
   property: value;
}

Pseudo-Class Hover

In CSS, pseudo-class:hoveris used to specify mouse hovering state of an element. This used to style element while users mouse passes through an element in document.

Syntax

tag:hover {
   property: value;
}

Example

Following example shows how this can be applied.

Pseudo-Class Active

The pseudo-class:activewill apply style to an element when user activates the element by clicking or tapping on it. This is most commonly used with interactive elements like button and anchor tag, but all the HTML elements can use this pseudo-class.

Syntax

tag:active {
   property: value;
}

Example

Here is an example that shows different usage of pseudo-class active.

Pseudo-Class Focus

The pseudo-class:focuswill apply style to an element when user focused an element like input tag by clicking on it. Before typing text in input element users has to click in input area to enable cursor, this is called focusing.

Syntax

tag:focus {
   property: value;
}

Example

This example will show how to use pseudo-class focus in HTML.

Pseudo-Class nth Child

The pseudo-class:nth-child(n)will apply style to any specified direct child of an element.

Syntax

tag:nth-child(number/ expression / odd / even) {
   property: value;
}

The pseudo-class nth-child can take number, mathematical expression or values like odd, even as parameter. To know about values associated with nth child visit our tutorial onPseudo Class nth-child().

Pseudo-Class First-Child

The pseudo-classfirst-childused to select first direct child element.

Syntax

tag:first-child {
   property: value;
}

Example

Following example show how to use first-child pseudo-class in HTML.

Pseudo-Class Last-Child

The pseudo-classlast-childused to select last direct child element.

Syntax

tag:last-child {
   property: value;
}

Example

Following example show how to use last-child pseudo-class in HTML.

Pseudo-Class Lang

The pseudo-class:lang()will apply style to an element based on value of lang attribute set to the element or it’s parent.

Here is an example of:lang()pseudo-class:

Pseudo-Class Not

The pseudo-class:not(selector)is used to apply style on all the elements expect elements that included in mentioned selectors. To know what is a selector in CSS check out our tutorial onCSS Selectors.

Syntax

tag:not(selector){
   property: value;
}

The selector can be a class, id, or tag in html.

Example

Following example shows how to use not pseudo-class in CSS

List of CSS Pseudo Classes

The table given below lists all the CSS pseudo-classes:

Pseudo-classDescriptionExample:activeRepresents an element that has been activated by the user.Try It:any-linkRepresents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited.Try It:autofillMatches an element that has its value autofill by the browser.Try It:checkedMatches any radio, checkbox or option element that is checked or toggled.Try It:defaultSelects form elements that are the default in a group of related elements.Try It:definedRepresents any custom element that has been defined.Try It:disabledRepresents a disabled element.Try It:emptyMatches an element that has no children.Try It:enabledRepresents an enabled element, after its has been activated.Try It:firstRepresents the first page of a printed document, with the @page at-rule.Try It:first-childRepresents the first element among a group of sibling elements.Try It:first-of-typeRepresents the first element of its type among a group of sibling elements.Try It:fullscreenMatches an element that is currently displayed in fullscreen mode.Try It:focusRepresents an element that has received focus.Try It:focus-visibleApplies while an element matches the :focus pseudo-class or receives focus.Try It:focus-withinMatches an element if the element or any of its descendants are focused.Try It:has()This represents an element if any of the relative selectors.Try It:hostThis selects the shadow host of the shadow DOM containing the CSS it is used inside.Try It:host()This function selects the shadow host of the shadow DOM containing the CSS it is used inside.Try It:host-context()This function allows you to style a custom element based on the classes or attributes of its ancestor elements.Try It:hoverMatches when the user interacts with an element with a pointing device, like a mouse, but does not necessarily activate it.Try It:indeterminateRepresents any form element whose state is indeterminate or unknown.Try It:in-rangeRepresents an element whose current value is within the range limits.Try It:invalidRepresents any element whose contents fail to validate.Try It:is()Takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.Try It:lang()Matches an element based on the language they are defined to be in.Try It:last-childRepresents the last element among a group of sibling elements.Try It:last-of-typeRepresents the last element of its type among a group of sibling elements.Try It:leftRepresents all left-hand pages of a printed document, used with @page at-rule.Try It:linkRepresents an element that has not yet been visited.Try It:modalMatches an element that is in a state in which it excludes all interaction with elements outside it until the interaction has been dismissed.Try It:not()Represents an element that do not match a list of selectors.Try It:nth-child()Selects child elements according to their position among all the sibling elements within a parent element.Try It:nth-last-child()Matches elements based on their position among siblings, counting from the last (end)Try It:nth-last-of-type()Matches elements based on their position among siblings of the same type, counting from the last (end).Try It:nth-of-type()Matches elements based on their position among siblings of the same type.Try It:only-childRepresents an element without any siblings.Try It:only-of-typeRepresents an element that has no siblings of same type.Try It:optionalRepresents an element that does not have a required attribute set on it.Try It:out-of-rangeRepresents an element whose current value is outside the range limits.Try It:picture-in-pictureMatches an element that is currently in picture-in-picture mode.Try It:placeholder-shownRepresents any element that is currently displaying placeholder text.Try It:read-onlyRepresents an element that is not editable by the user.Try It:read-writeRepresents an element that is editable by the user.Try It:requiredRepresents an element that has a required attribute set on it.Try It:rightRepresents all right-hand pages of a printed document, used with @page at-rule.Try It:rootMatches the root element of a document tree.Try It:scopeRepresents elements that are a reference point, or scope, for selectors to match with.Try It:targetRepresents the target element with an id matching the URL’s fragment.Try It:validRepresents any element whose contents validate successfully.Try It:visitedApplies once the link has been visited.Try It:where()Takes a selector list as its argument and selects any element that matches.Try It