CSS Pseudo Class Selectors in Hindi | Pseudo-Class Property

by

इस आर्टिकल में css pseudo class के बारे में जानेगें | Pseudo Class Selector क्या है और इसे CSS में कैसे इस्तेमाल किया जाता है उसे सीखेंगें |

Table of Contents hide
1 Pseudo Class in CSS
2 Pseudo Class Selectors List
3 :first-child
4 :last-child
5 :nth-child()
6 :nth-last-child()
7 :first-of-type
8 :last-of-type
9 :nth-of-type()
10 :nth-last-of-type()
11 :only-child
12 :only-of-type
13 :empty
14 :not()
15 अन्य CSS Tutorial के सुझाव

Pseudo Class in CSS

CSS Pseudo-Class selector दो तरह से काम करती है | पेहली html element की hidden address को ढूंड कर उसपे css लगाती है | दूसरी html element के किसी खास state पे उसे style देती है |

html element की खास state जैसे की input element की clicked या unclicked stage, anchor tag की hover या visited state | ये सब state को चेक करती है और उसमे style लगाती है | वैसे ही किसी element की child tag को track करके उसे style लगाती है |

Pseudo Class Selectors List

Pseudo Class को selector के साथ :(colon) सिंबल के जरिये लिखी जाती है |

Syntax
Selector:pseudo-class{ property: value; }

उदाहरण
a:link{ color : red; }

अब चलिए सारे selectors को एक एक करके समझते हैं |

:first-child

ये उन element को select करती है जो parent का पेहली child होती है |

<html>
 <head>
   <title>pseudo-classes tutorial</title>
   <style>
    p:first-child{color:green;}
   </style>
 </head>
 <body>
   <div>        
    <p>first paragraph</p>
    <p>second paragraph</p>
   </div>	
 </body>
</html>

ऊपर के उदाहरण में आपने देखा की div tag के अंदर दो पैराग्राफ हैं | और first-child selector ने पेहली पैराग्राफ को style दी | अगर div tag में पैराग्राफ अगर पेहली child ना होके कोई अलग tag first child होता तो p:first-child selector काम नहीं करता |

इसीलिए जब parent tag की पेहली child वही element है, जिसे हम style करना चाहते हैं तो उसे fisrt-child selector के जरिये css लगा सकतें हैं |

:last-child

किसी parent element के अंदर की last tag को select करना है, तो :last-child pseudo class का इस्तेमाल होता है |

उदाहरण

<html>
   <head>
      <title>Pseudo Class Demo</title>
      <style>
         p:last-child{color:red;}
      </style>
   </head>
   <body>
      <div>
         <p>fisrt paragragh</p>
         <p>last paragraph</p>
      </div>
   </body>
</html>

आउटपुट

last-child pseudo class

:nth-child()

किसी parent element के किसी खास child को select करने के लिए :nth-child pseudo class का इस्तेमाल होता है | जैसे एक div tag के अंदर 5 पैराग्राफ है और आप 3rd paragraph को style करना चाहते हैं, तो nth-child() के जरिये कर सकते हैं |

इस pseudo class से किसी भी child tag को target किया जा सकता है | जैसे parent tag के अंदर सारे odd number वाले या even नंबर वाले child चाहिए, तो nth-child pseudo class लगा सकते हैं |

उदाहरण

<html>
   <head>
      <title>Pseudo Class Demo</title>
      <style>
         div, ul{border: 1px solid black;}
         p:nth-child(3){color:red;}
         li:nth-child(2n){color:blue;}
      </style>
   </head>
   <body>
      <div>
         <p>fisrt paragragh</p>
         <p>2nd paragraph</p>
         <p>3rd paragraph</p>
         <p>4th paragraph</p>
         <p>5th paragraph</p>
      </div>
      <ul>
         <li>listitem1</li>
         <li>listitem1</li>
         <li>listitem1</li>
         <li>listitem1</li>
         <li>listitem1</li>
         <li>listitem1</li>
      </ul>
   </body>
</html>

आउटपुट

nth-child pseudo class

ऊपर के उदाहरण में आप देख रहे होंगे, p:nth-child(3) selector से हमने 3rd paragraph को style किया है | और li:nth-child(2n) selector के जरिये सारे even number वाले list को चून कर उसे style किया है |

:nth-last-child()

:nth-last-child() pseudo class, :nth-child() के बिपरीत काम करती है | ये parent element के child tag को निचे से count करके select करती है | मतलब parent element की सबसे आखरी tag इसके लिए पेहली tag और आखिरी tag इसके लिए पेहली tag होती है |

उदाहरण

<html>
    <head>
        <title>Pseudo Class Demo</title>
        <style>
            p:nth-last-child(4) {
                color: blue;
            }
        </style>
    </head>
    <body>
        <div>
            <p>fisrt paragragh</p>
            <p>2nd paragraph</p>
            <p>3rd paragraph</p>
            <p>4th paragraph</p>
            <p>5th paragraph</p>
        </div>
    </body>
</html>

आउटपुट

nth-last-child pseudo class

आउटपुट में देखें हमने 4th पैराग्राफ लिया था निचे से count करके इसीलिए, ये ऊपर की 2nd पैराग्राफ को color किया |

:first-of-type

:first-of-type pseudo class के जरिये उस tag को select कर सकतें हैं जो html document में कहीं पे भी पेहली बार लिखी गयी हो, या फिर कोई भी parent element के अंदर पेहली बार लिखी गयी हो |

उदाहरण

<html>
   <head>
      <title>Pseudo Class Demo</title>
      <style>
         p:first-of-type{color:red;}
      </style>
   </head>
   <body>
      <div>
         <p>div first paragraph</p>
         <p>div 2nd paragraph</p>
         <p>div 3rd paragraph</p>
      </div>
      <p>first paragraph</p>
      <p>2nd paragraph</p>
      <p>3rd paragraph</p>
      <ul>
         <p>ul first paragraph</p>
         <p>ul 2nd paragraph</p>
         <p>ul 3rd paragraph</p>
      </ul>
   </body>
</html>

आउटपुट

first-of-type pseudo class

आउटपुट में देखिये p:first-of-type pseudo class ने उन सारे पैराग्राफ को select किया जो html document, div tag और ul tag में पेहले आये थे |

:last-of-type

:last-of-type pseudo class के जरिये उस tag को select कर सकतें हैं जो html document में कहीं पे भी आखरी बार लिखी गयी हो, या फिर कोई भी parent element के अंदर आखरी बार लिखी गयी हो |

:last-of-type pseudo class, :first-of-type pseudo class की बिपरीत काम करती है |

:nth-of-type()

:nth-of-type() pseudo class के जरिये हम कोई tag को एक particular number के जरिये select कर सकते हैं चाहे वो parent element के अंदर हो या फिर html document में हो |

उदाहरण के लिए सोचिये आपको 4th paragraph को select करना है | p:nth-of-type(4) pseudo class उन सारे section में देखेगा जहाँ वो सिर्फ html document में लिखा हुआ हो या किसी और element के अंदर लिखा हुआ हो |

:nth-last-of-type()

:nth-last-of-type() pseudo class के जरिये हम कोई tag को एक particular number के जरिये select कर सकते हैं चाहे वो parent element के अंदर हो या फिर html document में हो | मगर ये उलटी तरफ से काम करती है मतलब ये descending order से select करती है |

:nth-last-of-type() pseudo class, :nth-of-type() की बिपरीत काम करती है |

:only-child

:only-child pseudo class के जरिये उस tag को select कर सकतें हैं जो किसी parent element में सिर्फ एक ही बार लिखा गया हो |

उदाहरण

<html>
   <head>
      <title>Pseudo Class Demo</title>
      <style>
         div{border:1px solid green;}
         p:only-child{color:red;}
      </style>
   </head>
   <body>
      <div id="div1">
         <p>div1 paragraph</p>
      </div>
      <br>
      <div id="div2">
         <p>div2 first paragraph</p>
         <p>div2 2nd paragraph</p>
         <p>div2 3rd paragraph</p>
      </div>
   </body>
</html>

आउटपुट

only-child pseudo class

:only-of-type

:only-of-type pseudo class के जरिये उस tag को select कर सकतें हैं जो किसी parent element में या फिर html document में सिर्फ एक ही बार लिखा गया हो |

:empty

html document में अगर कोई html element खाली हो | उस html tag के अंदर कुछ भी content ना हो तो ऐसे element को select करने के लिए :empty pseudo class का इस्तेमाल किया जाता है |

उदाहरण

<html>
   <head>
      <title>Pseudo Class Demo</title>
      <style>
         div:empty{border:1px solid red;}
      </style>
   </head>
   <body>
      <h1></h1>
      <div id="div1">
         <p>div1 paragraph</p>
      </div>
      <br>
      <div id="div2"></div>
   </body>
</html>

आउटपुट

उदाहरण में देखिये html document में दो div tags हैं | एक बिलकुल खाली है और दुसरे में एक paragraph है | :empty pseudo class के जरिये हमने उस खाली div tag को select किया और उसमे css लगाया |

:empty के जरिये उन सारे elements को target किया जा सकता है, जिसके अंदर कोई भी content ना हो | एक space भी ना हो उस element के अंदर तभी ये selector काम करेगा |

:not()

किसी html document में अगर किसी tag को छोड़ कर बाकि सब पे css लगाना है, तो :not() pseudo class का इस्तेमाल किया जाता है | किसी tag में css को exclude करने के लिए इस selector का इस्तेमाल होता है |

उदाहरण

<html>
   <head>
      <title>Pseudo Class Demo</title>
      <style>
         p:not(.class1){color:green;}
      </style>
   </head>
   <body>
      <p>1st paragraph</p>
      <p class="class1">2nd paragraph</p>
      <p>3rd paragraph</p>
   </body>
</html>

आउटपुट

not pseudo class

उदाहरण में हमने 3 पैराग्राफ लिया है और उसमे जिस पैराग्राफ को “class1” class लगा है, उसे style नहीं करना है | इसीलिए :not() pseudo class के जरिये उसे exclude कर दिया गया |

अन्य CSS Tutorial के सुझाव