CSS Pseudo-Elements and Pseudo-Classes

CSS pseudo-elements and pseudo-classes are versatile selectors that allow you to style specific elements and states within your HTML documents. In this tutorial, we’ll explore these powerful CSS features, providing clear explanations and practical code examples.

Introduction to Pseudo-Elements and Pseudo-Classes

Pseudo-elements and pseudo-classes are key to precisely targeting and styling HTML elements. Let’s start with a brief overview:


Pseudo-elements enable you to style specific parts of an element without requiring additional HTML markup. They are denoted with :: (double colons).



Pseudo-classes, on the other hand, select elements in specific states or positions, like :hover, :active, or :first-child. They are denoted with : (single colon).


Now, let’s delve into the world of CSS pseudo-elements and pseudo-classes.


1. ::before and ::after

The ::before and ::after pseudo-elements add content before and after an element. They are perfect for decorative elements or inserting additional content.


2. ::first-letter and ::first-line

These pseudo-elements style the first letter or first line of a block-level element, enhancing typography.


3. ::selection

The ::selection pseudo-element targets text selected by the user, allowing you to style selected text.



1. :not()

The :not() pseudo-class selects elements that do not match the specified selector, making it useful for excluding specific elements from a style rule.


2. :nth-child()

The :nth-child() pseudo-class selects elements based on their position within a parent element, allowing you to style every nth element.


3. :focus

The :focus pseudo-class styles elements when they gain focus, commonly used with interactive elements like form inputs.


Practical Exercises

Let’s reinforce your understanding with some exercises:

Exercise 1: Style Links

Select all unvisited links and give them a different color.

Exercise 2: Style Table Rows

Style odd rows in a table with a background color.

Exercise 3: Style Form Inputs

Style text inputs when they have focus, adding a border and changing the background color.

Browser Compatibility

Pseudo-elements and pseudo-classes are widely supported in modern browsers. However, for older browser versions, some advanced pseudo-elements and pseudo-classes may have limited compatibility.


CSS pseudo-elements and pseudo-classes are essential for enhancing the styling of your web documents. By mastering these selectors, you can create unique and interactive web designs. Explore more pseudo-elements and pseudo-classes, experiment with exercises, and incorporate them into your web projects to enhance user experience and design aesthetics.