इस Tutorial में हम आपको CSS pseudo-class Property in Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.
आप CSS Class के बारे में CSS Selector Tutorial में सीख चुके हैं. Class एक Element Attribute ही होता हैं जिसे Developers अपनी जरूरत के हिसाब से नाम देते हैं. इस नाम को बाद में CSS Selector बनाकर Element पर CSS Style Rules Apply किये जाते हैं.
ये कार्य हम सिर्फ Document Tree में शामिल Elements पर ही कर सकते हैं. जो Element Document Tree से बाहर रह जाते हैं उन्हे General Class से Target नही किया जा सकता हैं.
इसलिए जो Element Document Tree में छूट जाते हैं उनको Target करने के लिए CSS pseudo-class Property का इस्तेमाल किया जाता हैं.
pseudo-class से हम किसी भी Element की Special State को भी Target कर सकते हैं. हम Elements की Mouse Hover Stage को भी Define कर सकते हैं. Links की Visited, Unvisited,Focus, Active आदि Conditions को Separately Style कर सकते हैं.
pseudo-class Property General Syntax
pseudo-class का Syntax थोडा-सा अलग होता हैं. इसे अन्य Selector की तरह नहीं लिखा जाता हैं. इसलिए नीचे हम pseudo-class का General Syntax के बारे में बता रहे हैं.
selector:pseudo-class {property: values;}
ऊपर Syntax में आप देख सकते हैं कि Selector के बाद pseudo-class को Define किया गया हैं. pseudo-class को : Colon के चिन्ह से अल्ग किया जाता हैं. इसके बाद CSS Property और उसकी Value Declare की जाती हैं.
Complete List of pseudo-classes
pseudo-classes को कई तरीकों से Define किया जाता हैं. ये अलग-अलग परिस्थिति में भिन्न प्रकार से Define की जाती हैं. इसलिए इनका नाम और उपयोग हम नीचे बता रहे हैं.
:link
यह Anchor Tag की एक Stage होती हैं. जो सभी Unvisited Links को Target करती हैं. बाकि Link Stages पर इस Class का कोई प्रभाव नही पडता हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :link pseudo-class Example</title> <style type=”text/css”>a:link { color:red; }</style> </head> <body><a href=”#”>This is Link<a/> <a href=”#”>This is Another Link</a> </body></html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
:visited
यह Class सभी Visited Links को Target करती हैं. मतलब जिन Links पर एक बार Click किया जा चुका हैं. उन लिंक को इस Class द्वारा Target किया जाता हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :visited pseudo-class Example</title> <style type=”text/css”>a:visited { color:black; }</style> </head> <body><a href=”#”>This is Link<a/> <a href=”#”>This is Another Link</a> </body></html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
:hover
Mouse Cursor को किसी Element के ऊपर ले जाना Hover कहलात हैं. इस Stage को Style करने के लिए :hover Class का इस्तेमाल किया जाता हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :hover pseudo-class Example</title> <style type=”text/css”>p:hover { color:green; }</style> </head> <body><p>यह एक पैराग्राफ हैं. जब आप इसके ऊपर माउस करसर को ले जाऐंगे तो इसका कलर हरा हो जाएगा.</p></body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
:active
इस Class द्वारा किसी Link की Active Stage को Style किया जाता हैं. Links की Active Stage को देखने के लिए Mouse Click को Link के ऊपर दबाए रखें.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :active pseudo-class Example</title> <style type=”text/css”>a:active { color:red; }</style> </head> <body><a href=”#”>This is Link<a/> <a href=”#”>This is Another Link<a/> </body></html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
नीचे एक लिंक है जब आप इसके ऊपर माउस करसर को दबाकर रखेंगे तब इसका कलर लाल हो जाएगा.
इस Class द्वारा Elements की Focus Stage को Target किया जाता हैं. अधिकतर इसका इस्तेमाल Form Element के अलग-अलग Elements को Target करने के लिए किया जाता हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :focus pseudo-class Example</title> <style type=”text/css”>input:focus { border: 1px solid blue; }</style> </head> <body><p>हमने नीचे के फॉर्म बनाया हैं जब आप इस फॉर्म के किसी भी फिल्ड में डाटा लिखने के लिए क्लिक करेंगे तो इसकी बॉर्डर का कलर नीला हो जाएगा.</p> <form>Name: <input type=”text” name=”Name”> <br /> Email: <input type=”text” name=”Email”> <br /> <input type=”button” value=”Submit”>
</form> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
:target
href में url को # के साथ भी लिखा जाता हैं. #url किसी Particular ID को Target करता हैं. इस ID से संबंधित Element को Target करने के लिए :target pseudo-class का इस्तेमाल किया जाता हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :target pseudo-class Example</title> <style type=”text/css”>:target { color:gold; }</style> </head> <body><a href=”#mylink”>Click to Go to Paragraph.</p> <p id=”mylink”>जब आप ऊपर लिंक पर क्लिक करेंग़े तो इस पैराग्राफ पर पहुँच जाऐंगे. क्योंकि इस पैराग्राफ को ऊपर लिंक से Target किया गया हैं. और इसका कल्र Gold हैं.</p></body>
जब आप ऊपर लिंक पर क्लिक करेंग़े तो इस पैराग्राफ पर पहुँच जाऐंगे. क्योंकि इस पैराग्राफ को ऊपर लिंक से Target किया गया हैं. और इसका कलर Gold है.
:enabled
इस Class द्वारा By Default Enabled Elements को Target किया जाता हैं. इसका अधिकतर इस्तेमाल Form Elements में किया जाता हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :enabled pseudo-class Example</title> <style type=”text/css”>input:enabled { background-color: green; }</style> </head> <body><p>हमने नीचे के फॉर्म बनाया हैं. Name Box को Enable किया हुआ हैं और इसका Background Color हरा हैं. और Email Box को Disabled किया हुआ हैं. इसलिए इसका कलर नही बदला. </p> <form>Name: <input type=”text” name=”Name”> <br /> Email: <input type=”text” name=”Email” disabled> <br /> <input type=”submit” value=”Submit”>
</form> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
:disabled
इसका भी उपयोग Form Element में किया जाता हैं. इस Class द्वारा Disabled Elements को Target करने के लिए किया जाता हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :disabled pseudo-class Example</title> <style type=”text/css”>input:disabled { background-color: green; }</style> </head> <body><p>हमने नीचे के फॉर्म बनाया हैं. Name Box को Enable किया हुआ हैं और इसका Background Color नही बदला. और Email Box को Disabled किया हुआ हैं. इसलिए इसका कलर हरा हो गया हैं. </p> <form>Name: <input type=”text” name=”Name”> <br /> Email: <input type=”text” name=”Email” disabled> <br /> <input type=”submit” value=”Submit”>
</form> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
:checked
यह Class सभी Checked Boxes को Target किया जाता हैं. कभी-कभी Forms में कुछ विकल्प By Default Checked किये जाते हैं. ये Class इन्ही Checked Boxes को Target करती हैं.
यह Class Document के Root Element को Target करती हैं. जो अधिकतर HTML होता हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :root pseudo-class Example</title> <style type=”text/css”>:root { background-color: green;color:white; }</style> </head> <body><p>यह एक पैराग्राफ हैं. इसका कलर सफेद हैं और इसका बैकग्राउंड हरा हैं. </p> </body></html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
यह एक पैराग्राफ हैं. इसका कलर सफेद हैं और इसका बैकग्राउंड हरा हैं.
:first-child
इस Class द्वारा सिर्फ Container के सबसे पहले वाले Element को Target किया जाता हैं. जैसे आपके पास दो Div Element हैं और प्रत्येक Div में तीन-तीन Paragraph Element Defined हैं. तो यह Class प्रत्येक Div के सबसे पहले वाले Paragraph को Target करेगी.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :first-child pseudo-class Example</title> <style type=”text/css”>p:first-child { color:orange; }</style> </head> <body> <div><p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा. </p> <p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.</p> <p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का तीसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.</p> </div> <div><p>यह एक पैराग्राफ हैं. और यह Second Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा. </p> <p>यह एक पैराग्राफ हैं. और यह Second Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.</p> <p>यह एक पैराग्राफ हैं. और यह Second Parent Element का तीसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.</p> </div> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का तीसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
यह एक पैराग्राफ हैं. और यह Second Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.
यह एक पैराग्राफ हैं. और यह Second Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
यह एक पैराग्राफ हैं. और यह Second Parent Element का तीसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
:last-child
इस Class द्वारा Parent Container के अंतिम Element को Target करने के लिए किया जाता हैं. यह Class :first-child के विपरीत कार्य करती हैं. इसका उपयोग अधिकतर P Elements को Target करने के लिए किया जाता हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :last-child pseudo-class Example</title> <style type=”text/css”>p:last-child { color:orange; }</style> </head> <body> <div><p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.</p> <p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.</p> <p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का तीसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा. </p> </div> <div><p>यह एक पैराग्राफ हैं. और यह Second Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.</p> <p>यह एक पैराग्राफ हैं. और यह Second Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.</p> <p>यह एक पैराग्राफ हैं. और यह Second Parent Element का तीसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा. </p> </div> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का तीसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.
यह एक पैराग्राफ हैं. और यह Second Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
यह एक पैराग्राफ हैं. और यह Second Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
यह एक पैराग्राफ हैं. और यह Second Parent Element का तीसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.
:nth-child()
इस Class के द्वारा उन Elements को Target किया जाता हैं. जिसका क्रम Bracket में लिखा जाता हैं. यदि हम Container के हर दूसरे Paragraph को Target करना चाहते हैं तो हम () में 2 लिखेंगे. इससे प्रत्येक Parent Container का हर दूसरा Paragraph Target होगा.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :nth-child() pseudo-class Example</title> <style type=”text/css”>p:nth-child(2) { color:orange; }</style> </head> <body> <div><p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.</p> <p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.</p> <p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का तीसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.</p> </div> <div><p>यह एक पैराग्राफ हैं. और यह Second Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.</p> <p>यह एक पैराग्राफ हैं. और यह Second Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.</p> <p>यह एक पैराग्राफ हैं. और यह Second Parent Element का तीसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.</p> </div> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का तीसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
यह एक पैराग्राफ हैं. और यह Second Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
यह एक पैराग्राफ हैं. और यह Second Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.
यह एक पैराग्राफ हैं. और यह Second Parent Element का तीसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
:nth-of-type()
यदि आप सिर्फ किसी Particular Type के Child Element को Target करना चाहते हैं तो इस Class का इस्तेमाल कीजिए. जैसे आप Container में उपलब्ध अन्य Elements को छोडकर केवल P Elements को Target करना चाहते हैं तो ऐसा इस Class द्वारा किया जा सकता हैं. आप जिस क्रम के Element को Target करना चाहते हैं उसका क्रम () में लिखा जाता हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :nth-of-type() pseudo-class Example</title> <style type=”text/css”>p:nth-of-type(2) { color:orange; }</style> </head> <body> <div><span>यह एक Span Element हैं. और यह अपने Parent Element का पहला Element हैं. इसलिए यह Element Target नही होगा.</span> <p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.</p> <p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का दूससरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.</p> </div> <div><p>यह एक पैराग्राफ हैं. और यह Second Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.</p> <p>यह एक पैराग्राफ हैं. और यह Second Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.</p> <span>यह एक Span Element हैं. और यह Second Parent Element का तीसरा Element हैं. इसलिए यह Element Target नही होगा.</span> </div> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
यह एक Span Element हैं. और यह अपने Parent Element का पहला Element हैं. इसलिए यह Element Target नही होगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.
यह एक पैराग्राफ हैं. और यह Second Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
यह एक पैराग्राफ हैं. और यह Second Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.
यह एक Span Element हैं. और यह Second Parent Element का तीसरा Element हैं. इसलिए यह Element Target नही होगा.
:first-of-type
इस Class द्वारा केवल Container के किसी Particular Type के First Element को Target किया जा सकता हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :first-of-type pseudo-class Example</title> <style type=”text/css”>p:first-of-type { color:orange; }</style> </head> <body> <div><p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा. </p> <p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.</p> <span>यह एक Span Element हैं. और यह अपने Parent Element का तीसरा Element हैं. इसलिए यह Element Target नही होगा.</span> </div> <div><span>यह एक Span Element हैं. और यह Second Parent Element का पहला Element हैं. इसलिए यह Element Target नही होगा.</span> <p>यह एक पैराग्राफ हैं. और यह Second Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा. </p> <p>यह एक पैराग्राफ हैं. और यह Second Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.</p> </div> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
यह एक Span Element हैं. और यह Second Parent Element का तीसरा Element हैं. इसलिए यह Element Target नही होगा.
यह एक Span Element हैं. और यह अपने Parent Element का पहला Element हैं. इसलिए यह Element Target नही होगा.
यह एक पैराग्राफ हैं. और यह Second Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.
यह एक पैराग्राफ हैं. और यह Second Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
:last-of-type
इस Class द्वारा Container के किसी Particular Type के Last Element को Target किया जाता हैं. यह Class :first-of-type के विपरीत कार्य करती हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :last-of-type pseudo-class Example</title> <style type=”text/css”>p:last-of-type { color:orange; }</style> </head> <body> <div><p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा.</p> <p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का दूसरा और अंतिम पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.</p> <span>यह एक Span Element हैं. और यह अपने Parent Element का तीसरा Element हैं. इसलिए यह Element Target नही होगा.</span> </div> <div><span>यह एक Span Element हैं. और यह Second Parent Element का पहला Element हैं. इसलिए यह Element Target नही होगा.</span> <p>यह एक पैराग्राफ हैं. और यह Second Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.</p> <p>यह एक पैराग्राफ हैं. और यह Second Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.</p> </div> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का दूसरा और अंतिम पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.
यह एक Span Element हैं. और यह Second Parent Element का तीसरा Element हैं. इसलिए यह Element Target नही होगा.
यह एक Span Element हैं. और यह अपने Parent Element का पहला Element हैं. इसलिए यह Element Target नही होगा.
यह एक पैराग्राफ हैं. और यह Second Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा.
यह एक पैराग्राफ हैं. और यह Second Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.
nth-last-of-type()
यदि आप किसी Parent Container के Number विशेष Element को Target करना चाहते हैं तो इस Class का इस्तेमाल कीजिए. यह Class Elements की गिनती नीचे यानी Bottom से करती हैं. इस Class द्वारा सिर्फ किसी Particular Type के Elements को ही Target किया जा सकता हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :nth-last-of-type pseudo-class Example</title> <style type=”text/css”>p:nth-last-of-type(2) { color:orange; }</style> </head> <body> <div><p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. लेकिन, नीचे से इसका क्रम दूसरा हैं इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.</p> <p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का दूसरा और अंतिम पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.</p> <span>यह एक Span Element हैं. और यह अपने Parent Element का तीसरा Element हैं. इसलिए यह Element Target नही होगा.</span> </div> <div><span>यह एक Span Element हैं. और यह Second Parent Element का पहला Element हैं. इसलिए यह Element Target नही होगा.</span> <p>यह एक पैराग्राफ हैं. और यह Second Parent Element का पहला पैराग्राफ हैं. लेकिन, नीचे से इसका क्रम दूसरा हैं इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.</p> <p>यह एक पैराग्राफ हैं. और यह Second Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.</p> </div> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. लेकिन, नीचे से इसका क्रम दूसरा हैं इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का दूसरा और अंतिम पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा.
यह एक Span Element हैं. और यह Second Parent Element का तीसरा Element हैं. इसलिए यह Element Target नही होगा.
यह एक Span Element हैं. और यह अपने Parent Element का पहला Element हैं. इसलिए यह Element Target नही होगा.
यह एक पैराग्राफ हैं. और यह Second Parent Element का पहला पैराग्राफ हैं. लेकिन, नीचे से इसका क्रम दूसरा हैं इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.
यह एक पैराग्राफ हैं. और यह Second Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
:nth-last-child()
इस Class द्वारा हम Parent Element के अंतिम Child Element को Target कर सकते हैं. जिस Element को Target करना हैं उसकी क्रम संख्या () में लिखी जाती हैं. Elements की गणना नीचे से की जाती हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :nth-last-child pseudo-class Example</title> <style type=”text/css”>p:nth-last-child(3) { color:orange; }</style> </head> <body> <div><p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. लेकिन, नीचे से इसका क्रम तीसरा हैं इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.</p> <p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.</p> <p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का तीसरा पैराग्राफ हैं. इसलिए यह Element Target नही होगा.</p> </div> <div><p>यह एक पैराग्राफ हैं. और यह Second Parent Element का पहला पैराग्राफ हैं. लेकिन, नीचे से इसका क्रम तीसरा हैं इसलिए यह Element Target होगा. और इसका कलर Orange दिखाई देगा.</p> <p>यह एक पैराग्राफ हैं. और यह Second Parent Element का दूसरा पैराग्राफ हैं. लेकिन, नीचे से इसका क्रम दूसरा हैं इसलिए यह पैराग्राफ Target नही होगा.</p> <p>यह एक पैराग्राफ हैं. और यह Second Parent Element का तीसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.</p> </div> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. लेकिन, नीचे से इसका क्रम दूसरा हैं इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
यह एक पैराग्राफ हैं. और यह Second Parent Element का तीसरा पैराग्राफ हैं. इसलिए यह Element Target नही होगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. लेकिन, नीचे से इसका क्रम तीसरा हैं इसलिए यह Element Target होगा. और इसका कलर Orange दिखाई देगा.
यह एक पैराग्राफ हैं. और यह Second Parent Element का दूसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
यह एक पैराग्राफ हैं. और यह Second Parent Element का तीसरा पैराग्राफ हैं. इसलिए यह पैराग्राफ Target नही होगा.
:only-of-type
इस Class द्वारा किसी Particular Element को Target किया जाता हैं जो अपने Parent Element का एक मात्र Child Element होता हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :only-of-type pseudo-class Example</title> <style type=”text/css”>p:only-of-type { color:orange; }</style> </head> <body> <div><p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. और यह एकमात्र P Element इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.</p> <span>यह एक Span Element हैं. और यह अपने Parent Element का दूसरा Element हैं. इसलिए यह Element Target नही होगा.</span> <span>यह एक Span Element हैं. और यह अपने Parent Element का तीसरा Element हैं. इसलिए यह Element Target नही होगा.</span> </div> <div><p>यह एक पैराग्राफ हैं. और यह Second Parent Element का पहला पैराग्राफ हैं. और यह एकमात्र P Element हैं इसलिए यह Element Target होगा. और इसका कलर Orange दिखाई देगा.</p> <span>यह एक Span Element हैं. और यह Second Parent Element का दूसरा Element हैं. इसलिए यह Element Target नही होगा.</span> <span>यह एक Span Element हैं. और यह Second Parent Element का तीसरा Element हैं. इसलिए यह Element Target नही होगा.</span> </div> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. और यह एकमात्र P Element इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.
यह एक Span Element हैं. और यह अपने Parent Element का दूसरा Element हैं. इसलिए यह Element Target नही होगा.
यह एक Span Element हैं. और यह अपने Parent Element का तीसरा Element हैं. इसलिए यह Element Target नही होगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. और यह एकमात्र P Element इसलिए यह Element Target होगा. और इसका कलर Orange दिखाई देगा.
यह एक Span Element हैं. और यह Second Parent Element का दूसरा Element हैं. इसलिए यह Element Target नही होगा.
यह एक Span Element हैं. और यह Second Parent Element का तीसरा Element हैं. इसलिए यह Element Target नही होगा.
:not()
जिस Element को Target नही करना हैं उस Element को इस Class द्वारा Target किया जाता हैं. फिर इस Element पर Declare Style का Effect नही होता हैं. और शेष Elements पर Style Apply हो जाती हैं. Parent Element में से जिस Element को छोडना हैं उसे तो () में लिखते हैं और जिस पर Style Apply करनी हैं उसे Selector की जगह पर लिखा जाता हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :not() pseudo-class Example</title> <style type=”text/css”>p:not(span) { color:orange; }</style> </head> <body> <div><p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.</p> <span>यह एक Span Element हैं. और यह अपने Parent Element का दूसरा Element हैं. इसलिए यह Element Target नही होगा.</span> <span>यह एक Span Element हैं. और यह अपने Parent Element का तीसरा Element हैं. इसलिए यह Element Target नही होगा.</span> </div> <div><p>यह एक पैराग्राफ हैं. और यह Second Parent Element का पहला पैराग्राफ हैं. इसलिए यह Element Target होगा. और इसका कलर Orange दिखाई देगा.</p> <span>यह एक Span Element हैं. और यह Second Parent Element का दूसरा Element हैं. इसलिए यह Element Target नही होगा.</span> <span>यह एक Span Element हैं. और यह Second Parent Element का तीसरा Element हैं. इसलिए यह Element Target नही होगा.</span> </div> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. इसलिए यह पैराग्राफ Target होगा. और इसका कलर Orange दिखाई देगा.
यह एक Span Element हैं. और यह अपने Parent Element का दूसरा Element हैं. इसलिए यह Element Target नही होगा.
यह एक Span Element हैं. और यह अपने Parent Element का तीसरा Element हैं. इसलिए यह Element Target नही होगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं. इसलिए यह Element Target होगा. और इसका कलर Orange दिखाई देगा.
यह एक Span Element हैं. और यह Second Parent Element का दूसरा Element हैं. इसलिए यह Element Target नही होगा.
यह एक Span Element हैं. और यह Second Parent Element का तीसरा Element हैं. इसलिए यह Element Target नही होगा.
Note:- ऊपर हमने Span Element को Style Rule से अलग रखा हैं इसलिए इसे () में लिखा हैं और P Element को हम Style करना चाहते थे. इसलिए इसे Selector बनाया हैं.
:empty
इस Class द्वारा उन Elements को Target किया जाता हैं जिनमे कोई Content Define नहीं किया गया हैं और जिनका कोई Child Element भी नहीं हैं. Empty का मतलब है आपको Space भी नही देना हैं. इस बात का जरूर ध्यान रखें.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :empty pseudo-class Example</title> <style type=”text/css”>p:empty { width:200px; height:20px background-color:orange; }</style> </head> <body><p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं.</p> <p></p> <p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का तीसरा पैराग्राफ हैं. दूसरा पैराग्राफ Empty हैं.</p> <p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का चौथा पैराग्राफ हैं.</p> <p></p> <p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का छटा Element हैं. क्योंकि पांचवा पैराग्राफ Empty हैं.</p> </body></html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
:lang()
इस Class द्वारा उन Elements को Target किया जाता हैं जिनमे lang Attribute को Define किया गया हैं. इसके लिए Language Name को भी लिखना जरूरी हैं तभी हम किसी Particular भाषा के Element को Target कर सकते हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :lang() pseudo-class Example</title> <style type=”text/css”>:lang(hi) { color:gold; }</style> </head> <body><p lang=”en”>This is paragraph and its language is English.</p> <p lang=”hi”>यह दूसरा पैराग्राफ है और इसकी भाषा हिंदी हैं.</p> </body></html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This is paragraph and its language is English.
यह दूसरा पैराग्राफ है और इसकी भाषा हिंदी हैं.
:only-child
इस Class द्वारा उस Child Element को Target किया जाता हैं जो अपने Parent Element का एकमात्र Child Element होता हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :only-child pseudo-class Example</title> <style type=”text/css”>p:only-child { color:orange; }</style> </head> <body> <div><p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं.</p> <p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का दूसरा पैराग्राफ हैं.</p> <p>यह एक पैराग्राफ हैं. और यह अपने Parent Element का तीसरा पैराग्राफ हैं.</p> </div> <div><p>यह एक पैराग्राफ हैं. और यह Second Parent Element का पहला और एकमात्र पैराग्राफ हैं. इसलिए यह Target होगा.</p> </div> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला पैराग्राफ हैं.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का दूसरा पैराग्राफ हैं.
यह एक पैराग्राफ हैं. और यह Second Parent Element का तीसरा पैराग्राफ हैं.
यह एक पैराग्राफ हैं. और यह अपने Parent Element का पहला और एकमात्र पैराग्राफ हैं. इसलिए यह Target होगा.
:valid
इस Class का इस्तेमाल Form Element के उन Elements को Target करने के लिए किया जाता हैं जिन Elements में Validation का Use किया गया हैं. जब User द्वारा उस Element में Valid Data Input किया जाता हैं तब Declare Action कार्य करता हैं.
इस Class द्वारा उन Elements को Target किया जाता हैं. जिनमे Validation का Use किया गया हैं. जब Invalid Data Input किया जाता हैं. तब Declare Action कार्य करता हैं.
इस Class द्वारा उन Elements को Target किया जाता हैं जिनमे Data Range को Set किया गया हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head> <title>CSS :out-of-range pseudo-class Example</title> <style type=”text/css”>input:out-of-range { background-color:red;color:white; }</style> </head> <body><p>नीचे बने बॉक्स में 0-10 तक की संख्या लिखिए और इसके बाद 10 से बडी संख्या लिखकर देखिए. क्या बदलाव आता हैं. मतलब दहाई से बडी संख्या लिखनी है.</p> <form><input type=”number” min=”0″ max=”10″> <br /> </form> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
:read-only
जिन Form Elements में readonly Attribute Define किया जाता हैं उन Elements को इस Class द्वारा Target किया जाता हैं.
इस Tutorial में हमने आपको CSS pseudo-class Property की पूरी जानकारी दी हैं. आपने विभिन्न प्रकार की pseudo-classes नाम और उनके उपयोग के बारे में भी जाना हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.
