Pseudo Classes in CSS Hindi

Pseudo Classes in CSS

Pseudo Classes CSS में एक विशेष प्रकार की स्टाइलिंग होती है, जो किसी HTML element की विशिष्ट स्थिति (state) या व्यवहार (behavior) के आधार पर लागू होती है। इसे “:” (कोलन) के साथ लिखा जाता है।

ये तब उपयोगी होती हैं जब आप किसी element को उसकी सामान्य स्थिति से अलग दिखाना चाहते हैं, जैसे कि जब माउस उस पर हो, उसे क्लिक किया जाए, या जब लिंक विजिट की गई हो, आदि।

दुसरे शब्दों में, Pseudo Classes का इस्तेमाल तब होता है जब कोई element (text, button etc.) किसी खास स्थिति में होता है। उदाहरण के लिए, जब आप माउस को बटन या कोई text पर ले जाते हैं, तो उसका रंग बदल जाता है, या जब आप लिंक पर क्लिक करते हैं, तो उसका रंग अलग दिखता है।

Some common Pseudo Classes:

hover:

माउस को किसी element पर लाया जाता है।
उदाहरण: बटन पर माउस लाने पर उसका रंग बदलना।

active:

Element पर क्लिक किया जाता है (क्लिक के दौरान)।
उदाहरण: बटन को दबाने पर उसका रंग बदलना।

visited:

कोई लिंक पहले से विजिट हो चुका हो।
उदाहरण: देखे गए लिंक का रंग बैंगनी हो जाना।

focus:

Element पर फोकस होता है (जैसे इनपुट बॉक्स में टाइपिंग शुरू करने पर)।
उदाहरण: इनपुट बॉक्स पर क्लिक करने पर बॉर्डर हाइलाइट होना।

HTML Code:

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Normal Style */
        .button {
            background-color: lightblue;
            padding: 10px;
        }

        /* Pseudo Class :hover */
        .button:hover {
            background-color: lightgreen;
        }

        /* Pseudo Class :active */
        .button:active {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <button class="button">क्लिक करें</button>
</body>
</html>

button: बटन का सामान्य रंग हल्का नीला (lightblue) होगा।

button:hover: जब माउस बटन पर जाएगा, तो रंग हल्का हरा (lightgreen) हो जाएगा।

button:active: जब बटन को दबाया जाएगा, तो रंग पीला (yellow) हो जाएगा।