What Is The Difference Between Pseudo Elements and Pseudo Classes In Css

admin_img Posted By Bajarangi soft , Posted On 30-09-2020

A pseudo-class is used to define a special state of an element,Pseudo-classes can be combined with CSS classes,When you hover over the link in the example, it will change color,The :first-child pseudo-class matches a specified element that is the first child of another element,The :lang pseudo-class allows you to define special rules for different languages,A CSS pseudo-element is used to style specified parts of an element,The:first-line pseudo-element is used to add a special style to the first line of a text.

Pseudo elements and Pseudo classes in Css

1.Create a Pseudo Classes Html Page Using Css

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            display: none;
            background-color: yellow;
            padding: 20px;
        }

        div:hover p {
            display: block;
        }
    </style>
</head>
<body>

<div>Hover over me to show the p element
    <p>Tada! Here I am!</p>
</div>

</body>
</html>

2.Create a Pseudo Elements Html Page Using Css

<!DOCTYPE html>
<html>
<head>
    <style>
        p::first-line {
            color: #ff0000;
            font-variant: small-caps;
        }
        p::first-letter{
            color:green;
            font-size: xx-large;
        }

    </style>
</head>
<body>
<h2>Pseudo elements</h2>
<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>

</body>
</html>

Related Post