Skip to main content

Pseudo-Selectors in CSS – What Is a CSS Pseudo-Selector?

A CSS pseudo-selector does the following:

  • It selects a specific part of an HTML element
  • It selects an HTML element only when it is in a specific state

The two (2) types of pseudo-selectors are:

  • Pseudo-classes
  • Pseudo-elements

Let's discuss the two selectors below.

What Is a CSS Pseudo-Class Selector

A CSS pseudo-class selects HTML elements when they are in a specific state—for instance, when an element is in the hover state.

Syntax of a pseudo-class selector

A pseudo-class selector consists of a colon (:) and the pseudo-state's name you wish to target. Here's the syntax:

:pseudo-state-name { style declarations }

Example: Apply DeepPink to the h1 heading when users hover over it

The pseudo-class selector (:hover) below selects an <h1> element when it is in the hover state (when users move their mouse pointer over it).

h1:hover {
color: DeepPink;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, DeepPink will get applied to the <h1> element when users point their mouse over it.

<h1>Hello there! 👋 I am Heading 1</h1>
<p>First paragraph immediately after heading 1</p>
<h2>Heading 2 is my name</h2>
<p>Second paragraph immediately after heading 2</p>
<p>Third paragraph</p>
<h2>Heading 2 is my name</h2>
<p>Fourth paragraph</p>

Try it on StackBlitz

Note that it is not compulsory to precede a pseudo-class with an element selector. For instance, here is a valid pseudo-class CSS ruleset:

:hover {
color: DeepPink;
}

Try it on StackBlitz

But typically, you want to add a selector before your pseudo-class to indicate the exact element you wish to target.

Common CSS pseudo-classes

Below are some of the widely used pseudo-classes.

Pseudo-classesFunction

:root

Selects the root element of a document.

note
  • The <html> element is the root of an HTML document.
  • The CSS specificity of the :root pseudo-class is higher than the html name selector.
  • Developers typically use :root for global rulesets such as global CSS variables.

:link

Selects elements that users have not visited.

note
  • The :link pseudo-class only selects an unvisited <a> or <area> element with an href attribute.
  • It's best to place an element's :link rule before all other link-related rules. So the LVHA order is :link:visited:hover:active.

:visited

Selects elements that users have visited.

note
  • It's best to place an element's :visited rule after its :link rule but before its :hover and :active rules. So the LVHA order is :link:visited:hover:active.
  • Browsers strictly limit the styles you can modify with the :visited pseudo-class for privacy reasons.

:hover

Selects elements when users move their mouse pointer over them.

note

It's best to place an element's :hover rule after its :link and :visited rules but before its :active rule. So the LVHA order is :link:visited:hover:active.

:active

Selects elements when users activate them.

note
  • An element typically gets activated when users press down their primary mouse button. For instance, a <button> element gets active when users press it with their primary mouse button.
  • A right-handed mouse's primary button is typically the left mouse button.
  • It's best to place an element's :active rule after all other link-related rules. So the LVHA order is :link:visited:hover:active.

:focus

Selects elements when users focus on them.

note

An element typically gets focused on when you click, tap, or select it with your keyboard's Tab key. For instance, a form gets focused on when you click on its input field.

:empty

Selects elements that have no children.

note
  • An element's children include nodes, text, and whitespace characters.
  • Comments and CSS content are not part of an element's children.

:only-child

Selects an element that has no siblings. In other words, it only matches a node if it is the only child element of its parent.

tip

You can use the :hover pseudo-class selector to create tooltips—without JavaScript.

What Is a CSS Pseudo-Element Selector?

A CSS pseudo-element selects a specific part of an element.

Syntax of a pseudo-element selector

A pseudo-element selector consists of a double colon (::) and the pseudo-element's name you wish to target. Here's the syntax:

::pseudo-element-name { style declarations }
note

CSS1 and CSS2 used single colon for both pseudo-classes and pseudo-elements. But CSS3 distinguished single colon for only pseudo-classes and double colon for only pseudo-elements.

However, modern browsers accept single colon for CSS1 and CSS2's pseudo-elements for backward compatibility.

Example: Apply DeepPink and an xxx-large size to an h1 heading's first letter

The pseudo-element selector (::first-letter) below selects an <h1> element's first letter.

h1::first-letter {
color: DeepPink;
font-size: xxx-large;
}

So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, DeepPink and xxx-large font size will get applied to the <h1> element's first letter.

<h1>Hello there! 👋 I am Heading 1</h1>
<p>First paragraph immediately after heading 1</p>
<h2>Heading 2 is my name</h2>
<p>Second paragraph immediately after heading 2</p>
<p>Third paragraph</p>
<h2>Heading 2 is my name</h2>
<p>Fourth paragraph</p>

Try it on StackBlitz

Common pseudo-elements

Below are some of the widely used pseudo-elements.

Pseudo-elementsFunction

::after

Selects an element's content and insert some pseudo-element after it. In other words, it adds a pseudo-content as the selected element's last child.

note
  • The ::after pseudo-element selector typically gets used with the CSS content property.
  • The content ::after inserts is inline by default.
  • ::after does not work with replaced and <br> elements.
tip

You can use the ::after pseudo-element selector to create tooltips—without JavaScript.

::before

Selects an element's content and inserts some pseudo-element before it. In other words, it adds a pseudo-content as the selected element's first child.

note
  • The ::before pseudo-element selector is typically used with the CSS content property.
  • The content ::before inserts is inline by default.
  • ::before does not work with replaced and <br> elements.

::first-letter

Selects a block-level element's first letter.

note

You can use only the following properties with ::first-letter:

  • All background properties
  • All border properties
  • All font properties
  • All margin properties
  • All padding properties
  • box-shadow
  • color
  • float
  • letter-spacing
  • line-height
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-shadow
  • text-transform
  • vertical-align (only if float is none)
  • word-spacing (when appropriate)

::first-line

Selects a block-level element's first line.

note

You can use only the following properties with ::first-line:

  • All background properties
  • All font properties
  • color
  • letter-spacing
  • line-height
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-shadow
  • text-transform
  • vertical-align
  • word-spacing

::maker

Selects an <li> element's bullet or number maker.

note
  • You can use only the following properties with ::maker:

    • All animation properties
    • All font properties
    • All transition properties
    • color
    • content
    • direction
    • text-combine-upright
    • unicode-bidi
    • white-space
  • ::maker may support additional CSS properties in the future.

::selection

Selects the portion of a document that users highlight—for instance when a user clicks and drags the mouse pointer across a page's text.

note

You can use only the following properties with ::selection:

  • background-color
  • color
  • fill-color
  • stroke-color
  • stroke-width
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-thickness
  • text-shadow

Overview

This article discussed what a CSS pseudo-selector is. We also discussed the two types of pseudo-selectors.