इस Tutorial में हम आपको CSS pseudo-element Property in Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.
List of Content
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 नीचे दिया जा रहा हैं.
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 किया गया हैं. लेकिन, इनकी संख्या बढाने पर विचार किया जा रहा हैं.
नीचे हम आपको Currently Available Pseudo Elements के बारे में बता रहे हैं.
::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 किया जा सकता हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS ::first-letter Pseudo Element Example</title>
<style type=”text/css”>
p::first-letter {
font-size:65px;color:orange;
}
</style>
</head>
<body>
<p>First Paragraph. The first letter of this paragraph is bigger than the other letters.;/p>
<p>Second Paragraph. The first letter of this paragraph is bigger than the other letters.</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
First Paragraph. The first letter of this paragraph is bigger than the other letters.
Second Paragraph. The first letter of this paragraph is bigger than the other letters.
::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 किया जा सकता हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS ::first-line Pseudo Element Example</title>
<style type=”text/css”>
p::first-line {
text-decoration:underline;color:orange;
}
</style>
</head>
<body>
<p>First line of first paragraph. The first line of this paragraph is underlined and has a different color.;/p>
<p>First line of second paragraph. The first line of this paragraph is underlined and has a different color.</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
First ne of first paragraph. The first line of this paragraph is underlined and has a different color.
First line of second paragraph. The first line of this paragraph is underlined and has a different color.
::after
::after Pseudo Element का इस्तेमाल पहले से Defined Elements के Content के पीछे कुछ और Content Add करने के लिए किया जाता हैं. Content यानि Text और Image दोनों को इस्तेमाल किया जा सकता हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS ::after Pseudo Element Example</title>
<style type=”text/css”>
p::after {
content:”*”;
}
</style>
</head>
<body>
<p>First Paragraph.</p>
<p>Second Paragraph.</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
First Paragraph. *
Second Paragraph. *
::before
::before Pseudo Element का इस्तेमाल पहले से Difined Elements के Content के आगे मतलब पहले कुछ और Content Add करने के लिए इस्तेमाल किया जाता हैं. यहाँ भी Text और Image दोनों को Use कर सकते हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS ::before Pseudo Element Example</title>
<style type=”text/css”>
p::before {
content:”=”;
}
</style>
</head>
<body>
<p>First Paragraph.</p>
<p>Second Paragraph.</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
= First Paragraph.
= Second Paragraph.
::selection
जब Element Content को Mouse द्वारा Select किया जा रहा हो तब Selected Content को Style करने के लिए इस Element का इस्तेमाल किया जाता हैं. इस Element के साथ color, background, font आदि CSS Properties को Define किया जा सकता हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS ::selection Pseudo Element Example</title>
<style type=”text/css”>
::selection {
background-color: blue; color:white
}
</style>
</head>
<body>
<p>First Paragraph.</p>
<p>Second Paragraph.</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
First Paragraph.
Second Paragraph.
इसे Test करने के लिए ऊपर बने दोनों पैराग्राफ को माउस दवारा सेलेक्ट कीजिए.
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 नही कर सकते है.
आपने क्या सीखा?
इस Tutorial में हमने आपको CSS Pseudo Element Property की पूरी जानकारी दी हैं. आपने विभिन्न प्रकार की Pseudo Elements के नाम और उनके उपयोग के बारे में भी जाना हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.
#BeDigital
Leave a Reply