CSS Pseudo Classes

CSS Pseudo Classes allow you to style elements based on their state or position without adding extra classes or JavaScript.

Why Use Pseudo Classes?

• Create interactive web pages.
• Improve user experience.
• Style elements dynamically.
• Reduce JavaScript for simple effects.
• Create responsive forms and buttons.

a:hover{

    color:red;

}

A pseudo class begins with a colon (:) and selects elements based on a particular state rather than their name or class.

selector:pseudo-class{

    property:value;

}

The :hover pseudo class applies styles when the mouse pointer moves over an element.

button:hover{

    background:green;

    color:white;

}

img:hover{

    transform:scale(1.1);

}

The :active pseudo class applies styles while the user is clicking or pressing an element.

button:active{

    background:red;

    transform:scale(0.95);

}

The :focus pseudo class styles form elements when they receive keyboard or mouse focus.

input:focus{

    border:2px solid blue;

    outline:none;

}

textarea:focus{

    background:#f5f5f5;

}

The :first-child pseudo class selects the first child element of its parent, while :last-child selects the last child element.

li:first-child{

    color:blue;

    font-weight:bold;

}

li:last-child{

    color:red;

}

The :nth-child() pseudo class selects elements based on their position within a parent element.

li:nth-child(2){

    color:green;

}

tr:nth-child(even){

    background:#f2f2f2;

}

tr:nth-child(odd){

    background:#ffffff;

}

CSS provides many other pseudo classes to style elements according to their current state.

input:checked{

    accent-color:green;

}

input:disabled{

    background:#ddd;

}

a:visited{

    color:purple;

}

• Create interactive web pages.
• Improve user experience.
• Reduce the need for JavaScript.
• Improve accessibility.
• Style elements dynamically.
• Keep HTML clean.
• Easy to maintain.

button:hover{

    background:#007bff;

    color:white;

}

button:active{

    transform:scale(0.95);

}

Using pseudo classes correctly improves usability, accessibility, and the overall user experience of a website.

• Use :hover for interactive effects.
• Always provide a visible :focus style for accessibility.
• Use :active to provide click feedback.
• Keep hover animations smooth and subtle.
• Use :nth-child() for alternating rows.
• Avoid unnecessary JavaScript when CSS pseudo classes are sufficient.
• Test interactions on desktop and mobile devices.
• Keep styles consistent throughout the website.

❌ Poor

input:focus{

    outline:none;

}

✔ Better

input:focus{

    outline:2px solid blue;

}

CSS Pseudo Classes are supported by all major modern web browsers.

1. What is a CSS pseudo class?
2. What is the purpose of the :hover pseudo class?
3. What is the difference between :hover and :active?
4. Why is the :focus pseudo class important?
5. What does :nth-child() do?
6. What is the difference between :first-child and :last-child?
7. How does the :checked pseudo class work?
8. When is :visited applied?
9. Can multiple pseudo classes be combined?
10. Are CSS pseudo classes supported by modern browsers?

In this lesson, you learned:

• ✔ Introduction to CSS Pseudo Classes.
• ✔ What pseudo classes are.
• ✔ :hover pseudo class.
• ✔ :active pseudo class.
• ✔ :focus pseudo class.
• ✔ :first-child and :last-child.
• ✔ :nth-child() pseudo class.
• ✔ Other common pseudo classes.
• ✔ Best Practices and Common Mistakes.
• ✔ Browser Support and Interview Questions.