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>
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;
}
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 |
|---|---|
| Selects the root element of a document. note
|
| Selects elements that users have not visited. note
|
| Selects elements that users have visited. note
|
| Selects elements when users move their mouse pointer over them. note It's best to place an element's |
| Selects elements when users activate them. note
|
| 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. |
| Selects elements that have no children. note
|
| 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. |
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 }
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>
Common pseudo-elements
Below are some of the widely used pseudo-elements.
| Pseudo-elements | Function |
|---|---|
| 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 CodeSweetly TIP You can use the |
| 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. |
| Selects a block-level element's first letter. note You can use only the following properties with
|
| Selects a block-level element's first line. note You can use only the following properties with
|
| Selects an note
|
| 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
|
Overview
This article discussed what a CSS pseudo-selector is. We also discussed the two types of pseudo-selectors.