Previous Next

CSS pseudo classes in Hindi

CSS Pseudo Classes का उपयोग किसी HTML element की किसी particular state, position या condition को target करने के लिए किया जाता है। इनकी मदद से हम element की स्थिति के अनुसार अलग-अलग styling apply कर सकते हैं।

उदाहरण के लिए, जब user किसी button पर mouse लेकर जाता है, किसी input field में typing करने के लिए उसे select करता है, किसी checkbox को select करता है या किसी list में किसी particular position वाले item को target करना होता है, तब pseudo classes बहुत useful होती हैं।

Pseudo class को CSS selector के साथ : colon लगाकर लिखा जाता है, जैसे :hover, :focus और :first-child।

1. `:hover`

:hover pseudo class तब apply होती है जब user किसी element के ऊपर pointer लेकर जाता है। इसका use buttons, links, cards, navigation items और अन्य interactive elements में बहुत common है।

उदाहरण के लिए, किसी button पर mouse ले जाने पर उसका background color और text color बदल सकते हैं।

CSS

Code copied!

जब user button पर pointer लेकर जाएगा, तब button:hover वाला CSS rule apply होगा और button का background green हो जाएगा।

:hover का use website में visual feedback देने के लिए किया जाता है, जिससे user को पता चलता है कि कोई element interactive है।

2. `:focus`

:focus pseudo class उस element को target करती है जो currently focus में है। यह खासतौर पर form elements जैसे input, textarea और select के साथ useful है।

जब user किसी input पर click करता है या keyboard से Tab key दबाकर उस element तक पहुँचता है, तो वह focus state में आ सकता है।

CSS

Code copied!

ऊपर :focus की मदद से focused input की border blue की गई है। outline: none; default focus outline को हटाता है, लेकिन real websites में focus indicator को पूरी तरह हटाने के बजाय कोई स्पष्ट alternative focus style रखना accessibility के लिए बेहतर होता है।

3. `:visited`

:visited pseudo class उन links को target करती है जिन्हें browser के हिसाब से user पहले visit कर चुका है। इसका use visited और unvisited links की appearance को अलग करने के लिए किया जा सकता है।

CSS

Code copied!

इस example में normal link blue दिखाई देगा और visited link purple दिखाई दे सकता है। Browsers privacy reasons की वजह से :visited के साथ कुछ CSS properties को restrict करते हैं।

4. `:first-child`

:first-child pseudo class किसी parent element के पहले child को target करती है। इसका use तब useful होता है जब हमें किसी list, menu या container के first item को अलग style देना हो।

CSS

Code copied!

ऊपर ul के अंदर जो पहला li है, उस पर red color और bold styling apply होगी।

5. `:last-child`

:last-child pseudo class किसी parent element के आखिरी child को target करती है। यह :first-child के opposite situation में useful होती है।

CSS

Code copied!

इस example में list का आखिरी li bold और dark blue दिखाई देगा।

6. `:nth-child(n)`

:nth-child() एक powerful pseudo class है जिसकी मदद से parent के children में किसी particular position वाले element को target किया जा सकता है। इसमें specific number, odd, even और mathematical patterns का use किया जा सकता है।

CSS

Code copied!

even का use करके even-numbered rows को target किया जा सकता है, जबकि odd से odd-numbered rows को target किया जा सकता है। Tables में alternate row colors देने के लिए यह technique काफी useful है।

Specific position के लिए उदाहरण के रूप में li:nth-child(3) केवल तीसरे child को target कर सकता है।

7. `:not(selector)`

:not() pseudo class उन elements को select करने के लिए use होती है जो दिए गए selector से match नहीं करते। इसलिए इसे कभी-कभी exclusion selector के रूप में समझना आसान होता है।

CSS

Code copied!

ऊपर .special class वाले paragraphs को छोड़कर बाकी matching p elements पर gray color apply होगा।

8. `:checked`

:checked pseudo class उन form controls को target करती है जो currently selected या checked state में हों। इसका use checkbox और radio button जैसे controls के साथ किया जाता है।

CSS

Code copied!

जब checkbox checked होगा, तब selector input[type="checkbox"]:checked match करेगा। इसके आधार पर checkbox की appearance या उससे जुड़े दूसरे elements की styling बदली जा सकती है।

9. `:disabled` और `:enabled`

:disabled उन form elements को target करता है जो disabled या inactive state में होते हैं। इसके opposite में :enabled उन form elements को target करता है जो enabled और usable state में होते हैं।

CSS

Code copied!

इसका use forms में बहुत useful होता है। उदाहरण के लिए disabled input को gray background देकर user को visually बताया जा सकता है कि वह field currently available नहीं है।

CSS Pseudo Classes का Combined Example

अब एक practical example देखते हैं जिसमें कई pseudo classes को एक ही HTML page में use किया गया है। इसमें :hover, :visited, :focus, :checked, :disabled और :nth-child() जैसी pseudo classes को combine किया गया है।

HTML + CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS Pseudo Classes Example</title>

body {
        padding: 30px;
        background-color: #f9f9f9;
      }

a {
        color: blue;
        text-decoration: none;
      }

a:visited {
        color: purple;
      }

a:hover {
        text-decoration: underline;
      }

h2:first-child {
        color: darkgreen;
      }

form {
        margin-top: 20px;
        max-width: 400px;
        padding: 20px;
        border: 1px solid #ddd;
        background-color: #fff;
        border-radius: 8px;
      }

input[type="text"],
      input[type="email"],
      input[type="submit"] {
        display: block;
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }

input:focus {
        border-color: #007bff;
        outline: none;
      }

input[type="submit"]:hover {
        background-color: #28a745;
        color: white;
        cursor: pointer;
      }

input[type="checkbox"]:checked + label {
        color: green;
        font-weight: bold;
      }

input:disabled {
        background-color: #eee;
        color: #999;
      }

ul li:nth-child(even) {
        background-color: #f0f0f0;
      }

ul {
        padding-left: 20px;
      }

</style>
  </head>

<body>

<h2>CSS Pseudo Classes Demo</h2>

<p>Visit <a href="https://www.example.com">this link</a> to see visited style effect.</p>

<label for="email">Email:</label>
      <input type="email" id="email" placeholder="Enter your email">

<input type="checkbox" id="subscribe">
      <label for="subscribe">Subscribe to newsletter</label>

</form>
    <h3>List Items Example</h3>
    <ul>
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
      <li>Fourth item</li>
      <li>Fifth item</li>
    </ul>

</body>
</html>

Code copied!

इस combined example में अलग-अलग user interactions और element states के आधार पर styling बदलती है। उदाहरण के लिए input पर focus करने पर border बदलती है, submit button पर hover करने पर उसका background बदलता है, checkbox select करने पर उसके label की styling बदलती है और list की even items को अलग background मिलता है।

CSS Pseudo Classes के फायदे

Element की अलग-अलग states के अनुसार styling की जा सकती है।
Buttons और links को interactive visual effect दिया जा सकता है।
Forms में focus, checked और disabled states को आसानी से style किया जा सकता है।
Lists और tables के specific positions को target किया जा सकता है।
कई basic interactive effects के लिए JavaScript की जरूरत कम हो सकती है।
Website की usability और visual feedback को बेहतर बनाया जा सकता है।

Pseudo Classes और Pseudo Elements में अंतर

Pseudo Class किसी element की state, condition या position को target करती है, जबकि Pseudo Element किसी element के किसी specific part या generated content को target करने के लिए use होता है।

Feature	Pseudo Class	Pseudo Element
Syntax	`:` से शुरू होती है	आमतौर पर `::` से शुरू होता है
Use	State या condition target करना	Element के specific part को target करना
Examples	`:hover`, `:focus`, `:checked`	`::before`, `::after`, `::first-letter`

Note: CSS Pseudo Classes से आप बिना JavaScript के कई interactive और state-based styling effects बना सकते हैं। ये खासतौर पर forms, buttons, lists और links के साथ useful होती हैं।