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-classes	Function
: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.

CodeSweetly ads

Express Your Love for Coding!

Explore CodeSweetly's Shop for an array of stylish products to enhance your coding experience.

Click now to shop

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-elements	Function
::after	Selects an element's last item and inserts some pseudo-content 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 first item and inserts some pseudo-content 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.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Tweet this article