A “pseudo-class” in CSS refers to a specific state of an element, such as when an element is in focus or when it’s being interacted with in a particular way. CSS pseudo-classes allow you to apply styles to elements based on these specific states. In this explanation, we will discuss how to apply styles to pseudo-classes and provide examples of commonly used ones.

Writing Pseudo-classes

Pseudo-classes are written by combining a selector with a colon and the name of the pseudo-class. For example:

<a>CLICK!!</a>
<style>
    a:hover {
        cursor: pointer;
        transition: 1s;
        color: orange;
    }
</style>

In the above code, we define styles for the a tag when it is hovered over by the mouse pointer. When hovered over, the text color changes to orange, and a transition effect is applied to make the color change gradual.

Commonly Used Pseudo-classes

Let’s explore some frequently used pseudo-classes:

Now, let’s look at examples of each pseudo-class:

:hover

This pseudo-class applies styles when the user hovers over an element. It’s commonly used to add visual effects to links or buttons when hovered over.

<a>CLICK!!</a>
<style>
    a:hover {
        cursor: pointer;
        transition: 1s;
        color: orange;
    }
</style>

:focus

The :focus pseudo-class applies styles when an element receives focus. It’s often used to change the appearance of input fields when they are clicked.

<input name="name" />
<style>
    input:focus {
        outline: 1px solid red;
    }
</style>

:checked

The :checked pseudo-class is used when radio buttons or checkboxes are selected. It allows you to style these elements when they are checked.

<label><input type="radio" name="test" /><span class="radio">Check</span></label>
<style>
    input[type="radio"]{
        display: none;
    }
    .radio{
        /* Styles for the label */
    }
    input:checked + .radio::after{
        /* Styles for the checked radio button */
    }
</style>

:disabled

When an element is disabled, the :disabled pseudo-class can be used to apply styles to it. This is often used for indicating disabled form fields.

<input disabled name="name" placeholder="Please Enter"/>
<style>
    input:disabled {
        border: 1px solid red;
        background: #ecacac;
    }
</style>

:first-child

The :first-child pseudo-class is applied to the first child element within its parent. It’s useful for styling the first item in a list or the first cell in a table.

<ul>
    <li>ITEM1</li>
    <li>ITEM2</li>
    <li>ITEM3</li>
</ul>
<style>
    li:first-child {
        color: deepskyblue;
        font-weight: bold;
    }
</style>

:last-child

The :last-child pseudo-class is applied to the last child element within its parent. It’s used to style the last item in a list or the last cell in a table.

<ul>
    <li>ITEM1</li>
    <li>ITEM2</li>
    <li>ITEM3</li>
</ul>
<style>
    li:last-child {
        color: deepskyblue;
        font-weight: bold;
    }
</style>

:nth-child(n)

With the :nth-child(n) pseudo-class, you can style the nth child element within its parent. This is useful for targeting specific elements in a list or table.

<ul>
    <li>ITEM1</li>
    <li>ITEM2</li>
    <li>ITEM3</li>
</ul>
<style>
    li:nth-child(2) {
        color: deepskyblue;
        font-weight: bold;
    }
</style>

These are some of the commonly used pseudo-classes in CSS, allowing you to apply styles based on various element states and positions within their parent elements.

Learn Frontend with Skilled

At Skilled, we offer a specialized, practical programming learning service focused on frontend development.

We cover everything from coding to becoming a frontend engineer. Our service emphasizes practical learning while coding, ensuring that you gain “skills” rather than just knowledge.

We’re currently running a free trial campaign. If you’re interested, we encourage you to take advantage of this free trial.

Click here for a free Skilled trial