CSS Pseudo Class Property
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, Un-Visited,Focus, Active आदि Conditions को Separately Style कर सकते हैं।
Pseudo Class Property General Syntax
Pseudo Class का Syntax थोडा-सा अलग होता हैं। इसे अन्य Selector की तरह नहीं लिखा जाता हैं।
selector:pseudo-class {property: values;}
Complete List of Pseudo Classes
Pseudo Classes को कई तरीकों से Define किया जाता हैं ये अलग-अलग परिस्थिति में भिन्न प्रकार से Define की जाती हैं।
:link
यह Anchor Tag की एक Stage होती हैं। जो सभी Unvisited Links को Target करती हैं। बाकि Link Stages पर इस Class का कोई प्रभाव नही पडता हैं।
:visited
यह Class सभी Visited Links को Target करती हैं। मतलब जिन Links पर एक बार Click किया जा चुका हैं। उन लिंक को इस Class द्वारा Target किया जाता हैं।
:hover
Mouse Cursor को किसी Element के ऊपर ले जाना Hover कहलात हैं। इस Stage को Style करने के लिए :hover Class का प्रयोग किया जाता हैं।
:active
इस Class द्वारा किसी Link की Active Stage को Style किया जाता हैं। Links की Active Stage को देखने के लिए Mouse Click को Link के ऊपर दबाए रखें।
:focus
इस Class द्वारा Elements की Focus Stage को Target किया जाता हैं। अधिकतर इसका प्रयोग Form Element के अलग-अलग Elements को Target करने के लिए किया जाता हैं।
:target
href में url को # के साथ भी लिखा जाता हैं। #url किसी Particular ID को Target करता हैं। इस ID से संबंधित Element को Target करने के लिए :target pseudo-class का प्रयोग किया जाता हैं।
:enabled
इस Class द्वारा By Default Enabled Elements को Target किया जाता हैं। इसका अधिकतर प्रयोग Form Elements में किया जाता हैं।
इसका भी उपयोग Form Element में किया जाता हैं। इस Class द्वारा Disabled Elements को Target करने के लिए किया जाता हैं।
:checked
यह Class सभी Checked Boxes को Target किया जाता हैं। कभी-कभी Forms में कुछ विकल्प By Default Checked किये जाते हैं। ये Class इन्ही Checked Boxes को Target करती हैं।
:root
यह Class Document के Root Element को Target करती हैं। जो अधिकतर HTML होता हैं।
:first-child
इस Class द्वारा सिर्फ Container के सबसे पहले वाले Element को Target किया जाता हैं। जैसे आपके पास दो Div Element हैं और प्रत्येक Div में तीन-तीन Paragraph Element Defined हैं। तो यह Class प्रत्येक Div के सबसे पहले वाले Paragraph को Target करेगी।
:last-child
इस Class द्वारा Parent Container के अंतिम Element को Target करने के लिए किया जाता हैं। यह Class :first-child के विपरीत कार्य करती हैं। इसका उपयोग अधिकतर P Elements को Target करने के लिए किया जाता हैं।
:nth-child()
इस Class के द्वारा उन Elements को Target किया जाता हैं। जिसका क्रम Bracket में लिखा जाता हैं। यदि हम Container के हर दूसरे Paragraph को Target करना चाहते हैं तो हम () में 2 लिखेंगे। इससे प्रत्येक Parent Container का हर दूसरा Paragraph Target होगा।
:nth-of-type()
यदि आप सिर्फ किसी Particular Type के Child Element को Target करना चाहते हैं तो इस Class का प्रयोग कीजिए। जैसे Container में उपलब्ध अन्य Elements को छोडकर केवल P Elements को Target करना चाहते हैं तो ऐसा इस Class द्वारा किया जा सकता हैं। जिस क्रम के Element को Target करना चाहते हैं उसका क्रम () में लिखा जाता हैं।
:first-of-type
इस Class द्वारा केवल Container के किसी Particular Type के First Element को Target किया जा सकता हैं।
:last-of-type
इस Class द्वारा Container के किसी Particular Type के Last Element को Target किया जाता हैं। यह Class :first-of-type के विपरीत कार्य करती हैं।
nth-last-of-type()
यदि किसी Parent Container के Number विशेष Element को Target करना चाहते हैं तो इस Class का प्रयोग कीजिए। यह Class Elements की गिनती नीचे यानी Bottom से करती हैं। इस Class द्वारा सिर्फ किसी Particular Type के Elements को ही Target किया जा सकता हैं।
:nth-last-child()
इस Class द्वारा हम Parent Element के अंतिम Child Element को Target कर सकते हैं। जिस Element को Target करना हैं उसकी क्रम संख्या () में लिखी जाती हैं। Elements की गणना नीचे से की जाती हैं।
:only-of-type
इस Class द्वारा किसी Particular Element को Target किया जाता हैं जो अपने Parent Element का एक मात्र Child Element होता हैं।
:not()
जिस Element को Target नही करना हैं उस Element को इस Class द्वारा Target किया जाता हैं। फिर इस Element पर Declare Style का Effect नही होता हैं। और शेष Elements पर Style Apply हो जाती हैं। Parent Element में से जिस Element को छोडना हैं उसे तो () में लिखते हैं और जिस पर Style Apply करनी हैं उसे Selector की जगह पर लिखा जाता हैं।
:empty
इस Class द्वारा उन Elements को Target किया जाता हैं जिनमे कोई Content Define नहीं किया गया हैं और जिनका कोई Child Element भी नहीं हैं। Empty का मतलब है आपको Space भी नही देना हैं।
:lang()
इस Class द्वारा उन Elements को Target किया जाता हैं जिनमे lang Attribute को Define किया गया हैं। इसके लिए Language Name को भी लिखना जरूरी हैं तभी हम किसी Particular भाषा के Element को Target कर सकते हैं।
:only-child
इस Class द्वारा उस Child Element को Target किया जाता हैं जो अपने Parent Element का एकमात्र Child Element होता हैं।
:valid
इस Class का प्रयोग Form Element के उन Elements को Target करने के लिए किया जाता हैं जिन Elements में Validation का Use किया गया हैं। जब User द्वारा उस Element में Valid Data Input किया जाता हैं तब Declare Action कार्य करता हैं।
:invalid
इस Class द्वारा उन Elements को Target किया जाता हैं। जिनमे Validation का Use किया गया हैं। जब Invalid Data Input किया जाता हैं. तब Declare Action कार्य करता हैं।
:required
जिन Elements में required Attribute Define किया गया हैं उन Elements को इस Class द्वारा Target किया जाता हैं।
:optional
इस Class द्वारा उन Elements को Target किया जाता हैं। जिनमे required Attribute Define नहीं किया गया हैं।
:out-of-range
इस Class द्वारा उन Elements को Target किया जाता हैं जिनमे Data Range को Set किया गया हैं।
:read-only
जिन Form Elements में readonly Attribute Define किया जाता हैं उन Elements को इस Class द्वारा Target किया जाता हैं।
:read-write
इस Class द्वारा उन Elements को Target किया जाता हैं जिनमे readonly Attribute Define नहीं किया गया हैं।
For Any Doubt Clear on Telegram Discussion Group
No comments:
Post a Comment