Article Categories

Selected Reading

Pseudo-classes and all CSS Classes

CSS Web Development Front End Technology

CSS pseudo-classes are keywords added to selectors that specify a special state of the selected elements. They allow you to style elements when they're in a particular state like hover, focus, active, or being the first child of their parent.

Syntax

selector:pseudo-class {
    property: value;
}

Common Pseudo-classes

The following are the most commonly used pseudo-classes −

Pseudo-class	Description
`:hover`	Selects elements when mouse is over them
`:active`	Selects the active link while being clicked
`:focus`	Selects the element that currently has focus
`:visited`	Selects all visited links
`:link`	Selects all unvisited links
`:first-child`	Selects the first child element
`:nth-child(n)`	Selects the nth child element
`:checked`	Selects every checked input element

Example: Link States with Pseudo-classes

The following example demonstrates how to style different states of links using pseudo-classes −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
        padding: 20px;
    }
    
    a {
        font-size: 18px;
        text-decoration: none;
        padding: 10px;
        display: inline-block;
        margin: 10px;
        border: 2px solid transparent;
        border-radius: 5px;
    }
    
    a:link {
        color: #0066cc;
        background-color: #f0f8ff;
    }
    
    a:visited {
        color: #800080;
        background-color: #f5f0f5;
    }
    
    a:hover {
        color: #ff6600;
        background-color: #fff8f0;
        border-color: #ff6600;
    }
    
    a:active {
        color: #ff0000;
        background-color: #ffe0e0;
        transform: scale(0.98);
    }
</style>
</head>
<body>
    <h2>Pseudo-class Link States</h2>
    <a href="#">Hover over this link</a>
    <a href="https://example.com">Visit this link</a>
    <p>Try hovering, clicking, and visiting the links to see different states.</p>
</body>
</html>

Two styled links appear with different colors and backgrounds. When you hover over them, they change color and show a border. When clicked, they briefly change to red and scale slightly smaller.

Example: nth-child Pseudo-class

The following example uses :nth-child() to apply different colors to list items −

<!DOCTYPE html>
<html>
<head>
<style>
    .color-list {
        list-style: none;
        padding: 0;
    }
    
    .color-list li {
        padding: 15px;
        margin: 5px;
        color: white;
        font-weight: bold;
        text-align: center;
        border-radius: 8px;
    }
    
    .color-list li:nth-child(1) {
        background-color: #ff6b6b;
    }
    
    .color-list li:nth-child(2) {
        background-color: #4ecdc4;
    }
    
    .color-list li:nth-child(3) {
        background-color: #45b7d1;
    }
    
    .color-list li:nth-child(4) {
        background-color: #f9ca24;
        color: black;
    }
    
    .color-list li:nth-child(5) {
        background-color: #6c5ce7;
    }
</style>
</head>
<body>
    <h2>nth-child Pseudo-class Example</h2>
    <ul class="color-list">
        <li>First Item (Red)</li>
        <li>Second Item (Teal)</li>
        <li>Third Item (Blue)</li>
        <li>Fourth Item (Yellow)</li>
        <li>Fifth Item (Purple)</li>
    </ul>
</body>
</html>

A list of five items appears, each with a different background color: red, teal, blue, yellow, and purple. Each item is styled as a rounded rectangle with white text (black for yellow).

Example: Focus Pseudo-class

The following example demonstrates the :focus pseudo-class on form elements −

<!DOCTYPE html>
<html>
<head>
<style>
    .form-container {
        max-width: 400px;
        margin: 20px;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
    }
    
    input[type="text"], input[type="email"] {
        width: 100%;
        padding: 12px;
        margin: 8px 0;
        border: 2px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
        transition: all 0.3s ease;
    }
    
    input:focus {
        outline: none;
        border-color: #4CAF50;
        box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
        background-color: #f9fff9;
    }
    
    label {
        display: block;
        margin-top: 10px;
        font-weight: bold;
        color: #333;
    }
</style>
</head>
<body>
    <div class="form-container">
        <h2>Focus Pseudo-class Demo</h2>
        <label>Name:</label>
        <input type="text" placeholder="Enter your name">
        
        <label>Email:</label>
        <input type="email" placeholder="Enter your email">
        
        <p>Click in the input fields to see the focus effect.</p>
    </div>
</body>
</html>

A form with two input fields appears. When you click or tab into any input field, it gets a green border, green shadow, and light green background color.

Conclusion

CSS pseudo-classes provide powerful ways to style elements based on their state or position. They enable interactive effects like hover states, focus indicators, and structural styling without requiring JavaScript.

AmitDiwan

Updated on: 2026-03-15T15:09:39+05:30

296 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next