CSS Pseudo-Classes - Fullstackadda

CSS Pseudo-Classes are the keyword added to a selector that specifies a special state of the selected element(s). It is represented by a colon (:) followed by the keyword. Pseudo-classes allow you to apply styles to elements based on their dynamic state, such as when a user interacts with them.

Basically, pseudo classes set the style of an element when the element is in a particular special state.

pseudo-class	Description
:active	IIt is used to add style to an active element.
:hover	IIt adds special effects to an element when the user moves the mouse pointer over the element.
:link	IIt adds style to the unvisited link.
:visited	IIt adds style to a visited link.

Syntax:

selector: pseudo-class{
     property: value;
}

Different types of Pseudo classes are :

1 :hover

This pseudo class add effects to the HTML element only when mouse hovers on that particular element.

For example, after hovering the mouse on the link the font-color should become red and font-size should became 50px .

<!DOCTYPE html>
<html>

<head>
    <title>CSS hover</title>
    <style>
        h1:hover {
            color: red;
            font-size: 50px;
        }
    </style>
</head>

<body>
    <h1>fullstackadda.com</h1>
</body>

</html>

Try Now

Output: Before hover

After hover

2 :active

This pseudo class also by default targets HTML elements with href attribute, but used to style the links at active state.

When you press the link and hold it for some time, during this span of time the link will be in active state.

Example:

<!DOCTYPE html>
<html>

<head>
    <title>CSS active</title>
    <style>
        h1:active {
            color: red;
            font-size: 50px;
        }
    </style>
</head>

<body>
    <h1>fullstackadda.com</h1>
</body>

</html>

Try now

3 :focus

This pseudo class also by default targets HTML elements with href attribute, but used to style the links when it is focused and form elements also. It works on user input elements used in forms and is triggered as soon as the user clicks on it.

When you focus(click) on the link or when you press the tab key on the keyboard, the link will move to focused state.

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
      <title>CSS focus</title>
        form {
            width: 300px;
            height: 200px;
            margin: 0 auto;
            text-align: center;
            line-height: 2rem;
        }

        label {
            font-size: 20px;
        }

        input {
            background-color: default;
            float: right;
        }

        input:focus {
            background-color: yellow;
        }
    </style>
</head>

<body>

    <form>
        <label for="username">Username:</label>
        <input type="text" name="username" placeholder="Enter your username" />
        <br>
    </form>
</body>

</html>

Output: Before focus on the input element

After focus on the input element

4 :visited

This pseudo class also by default targets HTML elements with href attribute, but used to style the visited links.

<!DOCTYPE html>
<html>

<head>
    <title>CSS visit</title>
    <style>
        body {
            text-align: center;
        }

        a:visited {
            color: blue;
        }
    </style>
</head>

<body>
    <p>
        <a href="https://fullstackadda.com" target="_blank">
            This will change once visit the link
        </a>
    </p>


</body>

</html>

Output:

Advantages:

CSS pseudo-classes are selectors that allow you to style elements based on their state or position in the document. Some of the advantages of using CSS pseudo-classes include:

More targeted styling: Pseudo-classes allow you to target specific elements based on their state, such as whether they are being hovered over or are in a certain state. This can help you apply more precise and targeted styles to your page.
Cleaner HTML markup: Pseudo-classes can help you keep your HTML markup clean and semantic by allowing you to avoid adding unnecessary class or ID attributes to your elements just for the purpose of styling.
Better user experience: By using pseudo-classes to style interactive elements, such as links or form inputs, you can improve the user experience and make your website more intuitive and user-friendly.
Easier maintenance: Because pseudo-classes allow you to apply styles based on the state of an element, you can make changes to your styles without having to modify your HTML markup. This can make it easier to maintain your code and make updates in the future.
Increased performance: Pseudo-classes can be more efficient than using JavaScript to handle interactivity, as they are built into the browser and can be processed more quickly. This can help improve the performance and speed of your website.

CSS Pseudo-classes are the keywords for the selectors that define attributes when the selector is in an extra special state.
Commonly used CSS pseudo-classes:
- :active
- :hover
- :link
- :visited