CSS Pseudo Element Property
CSS द्वारा प्रत्येक HTML Element को Target किया जा सकता हैं। और Pseudo Class Property द्वारा तो Elements की Specific Stages को भी Target किया जा सकता हैं। मगर CSS Class, IDs या फिर अन्य Selectors के द्वारा हम किसी Element के Part विशेष को Target नही कर सकते हैं। तो CSS ने इसका समाधान दिया – CSS Pseudo Element. CSS Pseudo Elements द्वारा Elements के Part विशेष को Target किया जा सकता हैं और Document Tree में अनुपस्थित (Undefined) Elements भी Define किये जा सकते हैं। Pseudo Element द्वारा किसी Element की पहली लाईन, पहला अक्षर, Element के बाद कोई Content, Element के पहले कोई Image आदि को Define और Style किया जा सकता हैं।
Pseudo Element Property General Syntax
Pseudo Elements को HTML Elements की तरह Define नही किया जाता हैं। यह एक CSS Property हैं इसलिए इस Pseudo Elements को CSS के Syntax के अनुसार Define किया जाता हैं। Pseudo Elements का General Syntax नीचे दिया जा रहा हैं।
selectors::pseudo element {property: values;}
Pseudo Elements का Syntax कुछ-कुछ Pseudo Class के Syntax के समान होता हैं। इन दोनों के Selector में सबसे बडा अंतर Colon : संख्या का होता हैं। Pseudo Element को Selector के बाद लिखा जाता हैं। इन दोनों को Double Colon Marks :: से अलग किया जाता हैं। Pseudo Element को pseudo-class से अलग करने के लिए इसमे Double Colon का प्रयोग किया जाता हैं।
Note:- CSS3 में Double colon को Introduce किया गया हैं। मगर सभी Browsers द्वारा Single Color Separator को Support किया जाता हैं।
Complete List of Pseudo Elements
Pseudo Element की संख्या Element के Parts की संख्या के हिसाब से बनाई गई हैं। फिलहाल तो सिर्फ 5 Pseudo Elements को Introduce किया गया हैं। लेकिन, इनकी संख्या बढाने पर विचार किया जा रहा हैं।
::first-letter
::first-letter Pseudo Element का प्रयोग Text के पहले अक्षर पर Special Style Apply करने के लिए किया जाता है। इस Element को केवल block-level Elements पर ही Apply किया जा सकता हैं।
::first-letter Pseudo Element के साथ font Property, color, background, margin, padding, border, text-decoration, text-transform, line-height, float, clear आदि CSS Properties को Declare किया जा सकता हैं।
::first-line
::first-line Pseudo Element द्वारा Element Text की पहली लाईन पर Special Style Apply की जाती हैं। इस Element को भी केवल block-level Elements पर ही Apply किया जा सकता हैं।
::first-line Pseudo Element के साथ font Property, color, background,word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear आदि CSS Properties को Declare किया जा सकता हैं।
::after
::after Pseudo Element का प्रयोग पहले से Defined Elements के Content के पीछे कुछ और Content Add करने के लिए किया जाता हैं। Content यानि Text और Image दोनों को प्रयोग किया जा सकता हैं।
::before
::before Pseudo Element का प्रयोग पहले से Defined Elements के Content के आगे मतलब पहले कुछ और Content Add करने के लिए प्रयोग किया जाता हैं। यहाँ भी Text और Image दोनों को Use कर सकते हैं।
::selection
जब Element Content को Mouse द्वारा Select किया जा रहा हो तब Selected Content को Style करने के लिए इस Element का प्रयोग किया जाता हैं। इस Element के साथ color, background, font आदि CSS Properties को Define किया जा सकता हैं।
#Difference Between Pseudo Element & Pseudo Class
Pseudo Element और pseudo-class के बीच अक्सर Confusion आ जाती है। खासकर नये Developers तो इन दोनों CSS Properties को समझने में गलती करते ही हैं। इसलिए इन Confusion को दूर करने के लिए हम इन दोनों Properties के बीच उपलब्ध मुख्य अंतर को बता रहे हैं।
- Pseudo Element का प्रयोग Element Content के किसी Specific Part को Target करने के लिए किया जाता हैं। जैसे; first-letter, first-line आदि।
- जबकि Pseudo Class द्वारा Elements की Specific Stages को Target किया जाता हैं। जैसे; Mouse Hover, Focus आदि।
- Pseudo Elements द्वारा Document Tree से अनुपस्थित (Undefined) Elements को भी Target कर सकते हैं। जैसे; after, before आदि।
- लेकिन, Pseudo Class से सिर्फ Document Tree में समाहित नही होने वाले Elements को Target कर सकते हैं। नये Elements Define नही कर सकते है।
No comments:
Post a Comment