Pseudo Classes in CSS

In addition to type selectors and class selectors, CSS also allows pseudo-classes to style elements based on dynamic events, a change in state, or other conditions present in the HTML document that are not easily accomplished through other ways.

For example, you can use :hover pseudo class to style an element when the user hovers over the element. Similarly, you can use the pseudo class :visited to style hyperlinks that have been previously visited by the user.

A pseudo-class in CSS is a keyword that is used with selectors to select a special state of the element. We can use the pseudo class together with pseudo element to not only select an element from the page document but also from the history of content.

The general syntax to use a pseudo class with a selector in CSS is as follows:

selector:pseudo-class {
    /* CSS styles */
}

In the above syntax, there is the name of selector, followed by a colon (:) and then the pseudo class. The selector specifies the HTML element(s) you want to style. The colon separates the selector from the pseudo-class. Look at the below figure to understand the syntax with example.

An example of using pseudo class with selector in CSS.

In the figure, the CSS will apply the specified CSS style to button when the user hovers over it.

Types of Pseudo Classes in CSS

Pseudo classes are special selectors in CSS that define the state of elements or select elements based on certain conditions, such as user interaction. They are classified into different categories, such as:

  • Link pseudo-classes
    • :link
    • :visited
  • Dynamic pseudo-classes
    • :hover
    • :active
    • :focus
  • User interface element states pseudo classes
    • :checked
    • :disabled
    • :enabled
    • :required
    • :optional
  • Range pseudo classes
    • :in-range
    • :out-of-range
  • Validity pseudo classes
    • :valid
    • :invalid
  • Default-option pseudo class
    • :default
  • Structural Pseudo-Classes
    • :root
    • :nth-child (n)
    • :nth-last-child (n)
    • :nth-of-type (n)
    • :nth-last-of-type (n)
    • :first-child
    • :last-child
    • :first-of-type
    • :last-of-type
    • :only-child
    • :only-of-type
    • :empty
  • Target pseudo class
    • :target
  • Language pseudo-class
    • :lang (identifier)
  • Directionality pseudo-class
    • :dir (identifier)
  • Negation pseudo class
    • :not (selector)

Dynamic Pseudo Classes in CSS

There are three types of dynamic pseudo classes in CSS that are as follows:

  • :hover
  • :focus
  • :active

1. :hover Pseudo Class:

The pseudo class :hover selects an element when the mouse is over it. When the user moves the mouse pointer over the element, the specified style is applied. However, when the user moves the mouse pointer away from the element, the style is no longer applied and the element returns to its original style.

Example 1:

<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo-Class :hover Example</title>
<style>
/* Basic styling for the button */
button {
   background-color: #4CAF50; /* Green background */
   border: none;
   color: white;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 4px 2px;
   cursor: pointer;
   border-radius: 8px; /* Rounded corners */
   transition: background-color 0.3s; /* Smooth transition effect */
}
/* Styling for the button when hovered over */
button:hover {
   background-color: lightblue; /* Change to light blue when hovered */
   color: black; /* Change text color to black */
}
</style>
</head>
<body>
    <button>Hover Over Me!</button>
</body>
</html>

In this example, the button selector applies base styles to the button. The button:hover pseudo-class changes the button’s background color to light blue and text color to black when the mouse pointer hovers over it.

When the button is not being interacted with the user, it has a green background and white text colors. When the user hovers over the button, the background color transitions to light blue, and the text color changes to black.

After the user moves the mouse pointer away from the button, it returns to its original green background color and white text color.

2. :active Pseudo Class:

The :active pseudo-class selects an element such as a button, which is being activated by the user. For example, when the user clicks on the button and holds down the mouse button on, the specified style is applied until the user holds down the mouse button. When the user releases the mouse button, the button returns to its original state or style. Let’s take an example on it.

Example 3:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Pseudo-Class :active Example</title>
<style>
a:active {
   color: red;
}
</style>
</head>
<body>
  <h2>Links to Useful Sites</h2>
  <ul>
    <li><a href="https://www.scientecheasy.com">Scientech Easy</a></li>
    <li><a href="https://www.google.com">Google</a></li>
    <li><a href="https://www.Yahoo.com">Yahoo</a></li>
    <li><a href="https://www.facebook.com">Facebook</a></li>
  </ul>
</body>
</html>

Output:

An example of :active pseudo class in CSS.

3. :focus Pseudo Class:

The :focus pseudo class in CSS allows you to select an element, such as an <input> element that has focus, typically through user interaction via keyboard or mouse. When a user clicks on an input field or navigates to it using the keyboard, the field receives focus. You can also use focus keyword for links and button elements.

Let’s take an example in which we will use :focus pseudo-class in a form with input fields.

Example 4:

<!DOCTYPE html>
<html>
<head>
    <title>:focus Pseudo-Class Example</title>
<style>
/* Basic styling for form elements */
input {
   padding: 10px;
   border: 2px solid #ccc;
   border-radius: 4px;
   font-size: 16px;
   width: 100%;
   box-sizing: border-box;
   margin-bottom: 15px;
}
/* Focus styling for input fields */
input:focus {
   border-color: #4CAF50;
   outline: none; /* Remove default outline */
   box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); /* Add green shadow */
}
</style>
</head>
<body>
  <h2>Form with Focus Styles</h2>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter your name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Enter your email">

    <button type="submit">Submit</button>
</form>
</body>
</html>

Output:

An example of :focus pseudo class.
In this HTML code, we have a simple form with two input fields for name and email, each accompanied by a label. A submit button is included to submit the form. When the user clicks on or navigates to an input field, the :focus pseudo-class is triggered.


The input:focus pseudo-class selector changes the border color to green and a green shadow appears around it, when an input field is focused or currently active.

Link History Pseudo Classes in CSS

Link history pseudo classes in CSS allow you to style hyperlinks based on their state of being visited or unvisited. Two pseudo-classes, such as :link and :visited are used to separate styles based on user actions.

1. :link Pseudo Class:

The :link pseudo-class selects all unvisited links in the HTML document. It applies styles to hyperlinks that the user has not yet clicked on.

2. :visited Pseudo Class:

The :visited pseudo-class selects all the visited links in the HTML document. It applies styles to hyperlinks that the user has previously clicked on and visited.

We can use the blue color for an unvisited hyperlink, and purple for a visited hyperlink. These are the default styles your browser applies. Let’s take an example on it.

Example 5:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Link Pseudo Classes Example</title>
<style>
/* Styling for unvisited links */
a:link {
  color: blue; /* Blue color for unvisited links */
  text-decoration: none;
}
/* Styling for visited links */
a:visited {
  color: purple; /* Purple color for visited links */
  text-decoration: underline;
}
/* Styling for links when hovered over */
a:hover {
  color: red; /* Red color on hover */
  text-decoration: underline;
}
/* Styling for active links */
a:active {
  color: green; /* Green color when active (clicked) */
  text-decoration: none;
}
</style>
</head>
<body>
  <h2>Link History Pseudo Classes</h2>
  <ul>
    <li><a href="https://www.scientecheasy.com">Scientech Easy</a></li>
    <li><a href="https://www.google.com">Google</a></li>
    <li><a href="https://www.wikipedia.org">Wikipedia</a></li>
  </ul>
</body>
</html>

In this example code, the a:link pseudo class applies styles to links that have not been visited. Here, unvisited links are blue and have no underline. Whereas, the a:visited pseudo class applies styles to links that have been visited. Here, the visited links are purple and underlined.

The a:hover pseudo-class changes the color of the links to red when the user hovers over them. The a:active pseudo-class applies styles to links when they are being clicked. Active links are green and not underlined.

When the browser loads the web page, all links initially appear blue if they have not been visited before. After a user clicks on a link and returns to the page, the link appears purple, indicating it has been visited.

The hover effect changes the link color to red as the user moves the mouse over it, providing a visual cue for interactivity. When the user clicks on a link, it briefly turns green, indicating an active state.

User Interface Element State Pseudo Classes in CSS

User Interface (UI) element state pseudo-classes in CSS are used to apply styles based on the state of form elements. The most common user interface element state pseudo classes are as:

  • :disable
  • :enable
  • :checked
  • :required
  • :optional

1. :disable Pseudo Class:

The :disable pseudo class allows us to select disabled <input> elements. In other words, this selector targets elements that are disabled and not interactive.

Example 6:

<!DOCTYPE html>
<html>
<head>
    <title>Disabled Pseudo-Class Example</title>
<style>
/* Basic styling for form elements */
input[type="text"] {
   padding: 10px;
   border: 2px solid #ccc;
   border-radius: 4px;
   width: 100%;
   box-sizing: border-box;
   margin-bottom: 15px;
   font-size: 16px;
}
/* Styling for disabled buttons */
button:disabled {
   background-color: #ddd; /* Grey background */
   color: #999; /* Grey text */
   border: 2px solid #ccc;
   padding: 10px 20px;
   border-radius: 4px;
   cursor: not-allowed; /* Not-allowed cursor */
   font-size: 16px;
}
</style>
</head>
<body>
  <h2>Form with Disabled Button</h2>
  <form>
     <label for="name">Name:</label>
     <input type="text" id="name" name="name" placeholder="Enter your name">

     <button type="submit" disabled>Submit</button>
  </form>
</body>
</html>

In this example, the :disabled pseudo-class selector styles the button with a grey background and text color, telling its non-interactive state.
The not-allowed cursor appears when the user hovers over the disabled button, providing a clear cue to users that the button cannot be clicked.

2. :enabled Pseudo Class:

The :enabled pseudo class allows to select every enabled <input> element. In other words, this selector targets elements that are enabled and interactive.

Example 7:

<!DOCTYPE html>
<html>
<head>
    <title>:enable Pseudo-Class Example</title>
<style>
/* Basic styling for input fields */
input {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 15px;
  font-size: 16px;
  transition: border-color 0.3s;
}
/* Styling for enabled input fields */
input:enabled {
  border-color: #4CAF50; /* Green border for enabled inputs */
  background-color: #f9f9f9; /* Light background */
}
/* Styling for disabled input fields */
input:disabled {
  border-color: #ddd; /* Grey border for disabled inputs */
  background-color: #eee; /* Grey background */
  color: #999; /* Grey text */
}
</style>
</head>
<body>
  <h2>Enabled and Disabled Input Fields</h2>
  <input type="text" placeholder="Enabled input">
  <input type="text" placeholder="Another enabled input">
  <input type="text" placeholder="Disabled input" disabled>
</body>
</html>

In this example, the input:enabled pseudo-class selects only the enabled input fields and applies a green border and a light background to indicate that they are interactive. The input:disabled pseudo-class styles the disabled input field with a grey border, background, and text to indicate that it is disabled.

3. :checked Pseudo Class:

The :checked pseudo class in CSS selects a checked checkbox or radio buttons.

Example 8:

<!DOCTYPE html>
<html>
<head>
<title>:checked Pseudo Class Example</title>
<style>
/* Basic styling for all input elements */
input[type="checkbox"], input[type="radio"] {
   margin: 10px;
   transform: scale(1.5);
}
/* Styling for checked checkboxes */
input[type="checkbox"]:checked {
   accent-color: #4CAF50;
}
/* Styling for checked radio buttons */
input[type="radio"]:checked {
   accent-color: #4CAF50;
}
</style>
</head>
<body>
  <h2>Checked Checkboxes and Radio Buttons</h2>
  <h3>Checkboxes</h3>
  <label>
     <input type="checkbox" checked> Option 1
  </label>
  <label>
     <input type="checkbox"> Option 2
  </label>
  <h3>Radio Buttons</h3>
  <label>
     <input type="radio" name="group1" checked> Choice A
  </label>
  <label>
     <input type="radio" name="group1"> Choice B
  </label>
</body>
</html>

4. :required Pseudo Class:

The :required pseudo class allows you to select those <input> elements that have the required attribute set. In other words, this pseudo class applies the styles to input elements that are required.

5. :optional Pseudo Class:

The :optional pseudo class allows you to select those elements that do not have the required attribute set. In other words, this pseudo class applies the styles to input elements that are optional. Let’s take an example based on the both CSS pseudo classes.

Example 9:

<!DOCTYPE html>
<html>
<head>
   <title>:required and :optional Pseudo Classes Example</title>
<style>
/* Basic styling for input fields */
input[type="text"], input[type="email"] {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 15px;
  font-size: 16px;
  transition: border-color 0.3s, background-color 0.3s;
}
/* Styling for required input fields */
input:required {
  border-color: #FF9800; /* Orange border for required inputs */
  background-color: #FFF8E1; /* Light yellow background */
}
/* Styling for optional input fields */
input:optional {
  border-color: #2196F3; /* Blue border for optional inputs */
  background-color: #E3F2FD; /* Light blue background */
}
/* Styling for input fields when focused */
input:focus {
  border-color: #4CAF50; /* Green border when focused */
  background-color: #F0F8F0; /* Light green background when focused */
}
</style>
</head>
<body>
  <h2>Form with Required and Optional Input Fields</h2>
  <form>
    <label for="name">Name (required):</label>
    <input type="text" id="name" name="name" required placeholder="Enter your name">

    <label for="email">Email (required):</label>
    <input type="email" id="email" name="email" required placeholder="Enter your email">

    <label for="phone">Phone (optional):</label>
    <input type="text" id="phone" name="phone" placeholder="Enter your phone number">

    <button type="submit">Submit</button>
  </form>
</body>
</html>

Output:

An example of :required and :optional pseudo classes in CSS.
In this example, the input:required pseudo-class selects all <input> elements that have the required attribute set. It will apply the styles of an orange border and a light yellow background to indicate that these fields are mandatory.

The input:optional pseudo-class selects the <input> element that do not have the required attribute specified. It will apply the styles of a blue border and a light blue background to indicate that these fields are not mandatory.

CSS Range Pseudo Classes

In CSS, the range pseudo classes are used to style elements based on their current state within a specified range. These pseudo-classes are mainly used with input elements that have range constraints defined by attributes like min, max, and value. The range pseudo-classes are available in two flavors:

1. :in-range Pseudo Class:

This pseudo-class selects an element whose attribute’s value is within the range of values specified for the element. It selects an element whose attribute value is greater than or equal to the min attribute and less than or equal to the max attribute.

2. :out-of-range Pseudo Class:

This pseudo-class selects an element whose attribute’s value is outside the range of values specified for the element. It selects an element whose attribute value is less than the min attribute or greater than the max attribute.

Let’s take an example in which we will understand how range pseudo classes can be used in CSS.

Example 10:

<!DOCTYPE html>
<html>
<head>
   <title>CSS Range Pseudo classes Example</title>
<style>
input:in-range {
   border: 2px solid green;
}
input:out-of-range {
   border: 2px solid red;
}
</style>
</head>
<body>
   <h2>Input Range Example</h2>
   <label for="age">Enter your age (between 18 and 60):</label>
   <input type="number" id="age" name="age" min="18" max="60">
</body>
</html>

In this example, we have defined an input element to enter age, with a min attribute’s value of 18 and a max attribute’s value of 60. The :in-range pseudo-class styles the input element with a green border when the value is within the specified range (18 to 60).

The :out-of-range pseudo-class styles the input element with a red border when the value is outside the specified range. When you enter a number within the range, the border of the input element turns green. But when you enter a number outside the range, it turns red.

In this tutorial, you have learned different types of pseudo classes in CSS through syntax and examples. I hope that you will have understood how to use pseudo classes with selectors to select a special state of an element. Thanks for reading this tutorial.

Related Posts

Trending now

Python interview questions and answers
Top 40 Python Interview Questions and Answers
Python String MCQ Quiz.
30 Python String Quiz – MCQ Questions
Python list MCQ
30 Must Solve Python List MCQ for Coding Interviews
Python tuple MCQ Quiz.
30 Python Tuple MCQ for Coding Interviews (2025)