CSS Pseudo-classes

What are Pseudo-classes?

CSS pseudo-classes are used to add special effects to some selectors. You do not need to use JavaScript or any other script to use those effects. A simple syntax of pseudo-classes is as follows −

Syntax

Example

selector:pseudo-class {property: value}

CSS classes can also be used with pseudo-classes −
selector.class:pseudo-class {property: value}

Anchor Pseudo-classes

links: These represent a particular word or sentence as a link. It is blue in color which basically shows it is an unvisited link or the user has never clicked on that link.
Visited link: This shows that the particular link has been visited by the user earlier. In this example, the visited link has been shown with the color red.
hover: When the mouse is over the link. It helps to grab the attention of the reader in the link. It has been shown with green color. When the mouse is over the link, the color of the link will change to green color.
Active: After clicking on the link, the link changes its state to an active state that represents the page linked to that link loading. For a while, it remains active until the page is loaded completely.

Example

 a:link {
            color: red;
        }
 
a:visited {
            color: blue;
        }
 
a:hover {
            color: orange;
        }
 
a:active {
            color: green;
        }
        
<body>
    <p><a href="https://www.codelines.in">
            Click on this link to see the effects.
        </a>
    </p>
</body>

You can click on above box to edit the code and run again.

Output

Click on this link to see the effects.

Pseudo-classes and HTML Classes

Pseudo-classes and HTML classes are concepts used in web development to style and select elements in Cascading Style Sheets (CSS).

Example

 a.highlight:hover {
  color: #ff0000;
}

You can click on above box to edit the code and run again.

Output

CSS Syntax

CSS Tutorial

Simple Tooltip Hover

A simple tooltip hover is a user interface pattern where additional information or a description appears when a user hovers their mouse over a specific element on a webpage. The tooltip is a small pop-up box that typically contains brief supplementary information about the element.

Example

.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip-content {
    display: none;
    position: absolute;
    background-color: orange;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    z-index: 1;
}

.tooltip-container:hover .tooltip-content {
    display: block;
}

<body>
    <div class="tooltip-container">
        <span class="tooltip-trigger">Hover me</span>
        <div class="tooltip-content">This is a simple tooltip</div>
    </div>
</body>

You can click on above box to edit the code and run again.