CSS Pseudo-classes

CSS Pseudo-classes are special keyword additions to selectors that allow you to select elements depending upon the element's current state, position, or depending upon user interaction without modifying the HTML to add classes. Pseudo-classes can render static HTML with dynamic behavior and appearance.

What's a CSS Pseudo-class?

A pseudo-class is a colon(:) and a pseudo-class name. It is used to define a special state of an element when hovering, the first child, visited link, etc.


            selector:pseudo-class {
                                         property: value;
            }

Popular CSS Pseudo-classes Explained

:hover

Styles an element when the user hovers the mouse over it.


            a:hover {
                        color: red;
            }

This changes the link color to red when the mouse is over it.

:active

Targets an element when it's being activated (e.g., clicked).


          button:active {
                            background-color: blue;
                }

Applies the background color only while the button is being clicked.

:focus

Applies styles to an element that has focus, like input fields when clicked or tabbed into.


          input:focus {
                            border: 2px solid green;
                }

:first-child

Targets the first child element inside a parent.


        p:first-child {
                            font-weight: bold;
                }

This makes the first paragraph in a container bold.

:last-child

Styles the last child element within its parent.


        li:last-child {
                            color: orange;
                }

:nth-child(n)

Matches elements based on their order within a parent.


          li:nth-child(2) {
                            background-color: lightgray;
                }

This targets the second list item only.

:not(selector)

Excludes certain elements from being selected.


          div:not(.highlight) {
                            background-color: #f9f9f9;
                }

Styles all divs except the ones with the .highlight class.

:visited

Styles links that the user has formerly visited.


          a:visited {
                            color: purple;
                }

:checked

Targets radio buttons and checkboxes that are checked.


          input:checked {
                            border: 2px solid green;
                }

Why Use Pseudo-classes?

Real-World Example

 
            nav ul li:first-child a {
                      color: gold;
            }

            input:focus {
                      border: 2px solid royalblue;
            }

            a:hover {
                      text-decoration: underline;
            }

You will find these selectors on real sites doing all sorts of navigational, form, and button stylings in dynamic ways that increase both the style and usability of the style.

Combining Pseudo-classes

you can also combine pseudo-classes with other selectors so that you can style very specifically.

ul li:nth-child(odd):hover {
        background-color: lightyellow;
    }
            ul li:nth-child(odd):hover {
                                           text-decoration: underline;
            }

This will only target odd list items, and change their background upon hover.

Conclusion

CSS pseudo-classes can be an effective way to create a responsive, interactive, and beautiful web experience. Once you learn to understand both when and how to use pseudo-classes, you will have learned to write clean and effective CSS that can respond to how the user interacts with your document and how your document is organized — all without the worry of having to use Javascript or mess up your HTML.

Bhai, use pseudo-classes responsibly, and you will have powerful and efficient CSS.

Try it Yourself