Article Categories

Selected Reading

Working with CSS Pseudo Classes

CSS Web Development Front End Technology

CSS pseudo classes are special keywords that allow you to select elements based on their state or position. They enable styling of elements when users interact with them (like :hover) or when they meet certain criteria (like :first-child).

NOTE − CSS3 pseudo classes use single-colon notation (:) to distinguish them from pseudo elements (which use double colons ::).

Syntax

selector:pseudo-class {
    property: value;
}

Common Pseudo Classes

Pseudo-Class	Description	Example Usage
`:hover`	Selects elements when user hovers over them	Button color changes on mouse over
`:active`	Selects elements when being clicked	Button press effect
`:focus`	Selects elements that have keyboard focus	Input field highlighting
`:first-child`	Selects the first child element	First list item styling
`:last-child`	Selects the last child element	Last paragraph margin removal
`:nth-child(n)`	Selects the nth child element	Alternating table row colors
`:visited`	Selects visited links	Different color for visited links
`:disabled`	Selects disabled form elements	Gray out disabled buttons

Example: Link Pseudo Classes

The most common pseudo classes are used with links to provide different styling for various states −

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        padding: 20px;
        text-align: center;
        background: linear-gradient(135deg, #f0f0f0 0%, #ffffff 100%);
    }
    
    .link {
        color: #007bff;
        text-decoration: none;
        margin: 10px;
        padding: 10px 15px;
        border-radius: 5px;
        transition: all 0.3s ease;
    }
    
    .link:visited {
        color: #6f42c1;
    }
    
    .link:hover {
        color: #ffffff;
        background-color: #007bff;
        text-decoration: none;
    }
    
    .link:active {
        background-color: #0056b3;
        transform: scale(0.95);
    }
</style>
</head>
<body>
    <div class="container">
        <h2>Link States Demo</h2>
        <a href="https://www.google.com" class="link">Visit Google</a>
        <a href="https://www.github.com" class="link">Visit GitHub</a>
    </div>
</body>
</html>

Two styled links appear with blue color. When hovered, they get a blue background with white text. Visited links appear purple.

Example: nth-child Pseudo Class

The :nth-child() pseudo class selects elements based on their position among siblings −

<!DOCTYPE html>
<html>
<head>
<style>
    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 20px;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .box {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        border-radius: 8px;
    }
    
    .box:nth-child(odd) {
        background-color: #e74c3c;
    }
    
    .box:nth-child(even) {
        background-color: #3498db;
    }
    
    .box:nth-child(3n) {
        background-color: #2ecc71;
    }
    
    .box:hover {
        transform: scale(1.1);
        transition: transform 0.3s ease;
    }
</style>
</head>
<body>
    <div class="grid-container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
</body>
</html>

A 3x2 grid of numbered boxes appears. Odd-numbered boxes are red, even-numbered boxes are blue, and every third box (3, 6) is green. Boxes scale up slightly on hover.

Example: Form Pseudo Classes

Pseudo classes are particularly useful for styling form elements based on their state −

<!DOCTYPE html>
<html>
<head>
<style>
    .form-container {
        max-width: 400px;
        margin: 20px auto;
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 10px;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    input[type="text"], input[type="email"] {
        width: 100%;
        padding: 10px;
        border: 2px solid #ddd;
        border-radius: 5px;
        transition: border-color 0.3s ease;
    }
    
    input:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    }
    
    input:valid {
        border-color: #28a745;
    }
    
    input:invalid {
        border-color: #dc3545;
    }
    
    button {
        background-color: #007bff;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    
    button:hover {
        background-color: #0056b3;
    }
    
    button:disabled {
        background-color: #6c757d;
        cursor: not-allowed;
    }
</style>
</head>
<body>
    <div class="form-container">
        <h3>Contact Form</h3>
        <div class="form-group">
            <input type="text" placeholder="Enter your name" required>
        </div>
        <div class="form-group">
            <input type="email" placeholder="Enter your email" required>
        </div>
        <button type="submit">Submit</button>
        <button type="button" disabled>Disabled Button</button>
    </div>
</body>
</html>

A contact form appears with styled input fields. When focused, inputs get a blue border and glow effect. Valid inputs show green borders, invalid ones show red borders. The submit button changes color on hover, while the disabled button appears gray.

Conclusion

CSS pseudo classes provide powerful ways to style elements based on their state, position, or user interaction. They make websites more interactive and improve user experience by providing visual feedback for different element states.

AmitDiwan

Updated on: 2026-03-15T14:00:03+05:30

158 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next