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

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