सीएसएस पॉडकास्ट - 014: बदली हुई पहचान वाले एलिमेंट
अगर आपके पास किसी कॉन्टेंट का कोई लेख है और आपको उसका पहला अक्षर ज़्यादा बड़ी गिरावट के तौर पर पेश करना है, तो ऐसा कैसे किया जा सकता है?
सीएसएस में,
इस तरह की डिज़ाइन की जानकारी पाने के लिए, ::first-letter
स्यूडो-एलिमेंट का इस्तेमाल किया जा सकता है.
p::first-letter {
color: blue;
float: left;
font-size: 2.6em;
font-weight: bold;
line-height: 1;
margin-inline-end: 0.2rem;
}
स्यूडो-एलिमेंट का मतलब है, बिना ज़्यादा एचटीएमएल जोड़े बिना किसी अतिरिक्त एलिमेंट को जोड़ना या टारगेट करना.
समाधान का यह उदाहरण, ::first-letter
का इस्तेमाल करना है. यह कई स्यूडो एलिमेंट में से एक है.
उनकी अलग-अलग भूमिकाएं होती हैं. इस लेख में, यह जाना जाएगा कि कौनसे छद्म एलिमेंट उपलब्ध हैं और उनका इस्तेमाल कैसे किया जा सकता है.
::before
और ::after
::before
और ::after
दोनों एलिमेंट, सिर्फ़ किसी एलिमेंट में चाइल्ड एलिमेंट बनाते हैं. ऐसा तब ही होता है, जब आपने content
प्रॉपर्टी को तय किया हो.
.my-element::before {
content: "";
}
.my-element::after {
content: "";
}
content
कोई भी स्ट्रिंग हो सकती है.
यहां तक कि खाली स्ट्रिंग भी हो सकती है.
हालांकि, इस बात का ध्यान रखें कि खाली स्ट्रिंग के अलावा, स्क्रीन रीडर किसी भी चीज़ का एलान कर सकता है.
ऐसी इमेज url
जोड़ी जा सकती है
जिसमें इमेज को उसके ओरिजनल डाइमेंशन में शामिल किया जाए,
ताकि उसका साइज़ न बदला जा सके.
आपके पास counter
को शामिल करने का विकल्प भी है.
::before
या ::after
एलिमेंट बनाने के बाद,
उसे बिना किसी सीमा के अपनी पसंद के मुताबिक बनाया जा सकता है.
सिर्फ़ ऐसे एलिमेंट में ::before
या ::after
एलिमेंट डाला जा सकता है जो चाइल्ड एलिमेंट (दस्तावेज़ ट्री वाले एलिमेंट) स्वीकार करेगा. ऐसा करने से, <img />
, <video>
, और <input>
जैसे एलिमेंट काम नहीं करेंगे.
::first-letter
हमें लेसन की शुरुआत में इस छद्म एलिमेंट के बारे में पता चला.
ध्यान रखें कि ::first-letter
को टारगेट करते समय, सभी सीएसएस प्रॉपर्टी का इस्तेमाल नहीं किया जा सकता.
उपलब्ध प्रॉपर्टी हैं:
color
background
प्रॉपर्टी (जैसे,background-image
)border
प्रॉपर्टी (जैसे,border-color
)float
font
प्रॉपर्टी (जैसे,font-size
औरfont-weight
)- टेक्स्ट प्रॉपर्टी (जैसे,
text-decoration
औरword-spacing
)
p::first-letter {
color: goldenrod;
font-weight: bold;
}
::first-line
::first-line
छद्म-एलिमेंट से आपको टेक्स्ट की पहली लाइन को सिर्फ़ तब स्टाइल करने की सुविधा मिलती है, जब ::first-line
लागू किए गए एलिमेंट में display
वैल्यू block
,
inline-block
, list-item
, table-caption
या table-cell
हो.
p::first-line {
color: goldenrod;
font-weight: bold;
}
::first-letter
स्यूडो-एलिमेंट की तरह,
सीएसएस प्रॉपर्टी का सिर्फ़ एक सबसेट है, जिसका इस्तेमाल किया जा सकता है:
color
background
प्रॉपर्टीfont
प्रॉपर्टीtext
प्रॉपर्टी
::backdrop
अगर आपके पास <dialog>
या <video>
जैसा कोई एलिमेंट है जिसे फ़ुल स्क्रीन मोड में दिखाया गया है, तो ::backdrop
स्यूडो एलिमेंट का इस्तेमाल करके, बैकड्रॉप—एलिमेंट और पेज के बाकी हिस्सों के बीच की खाली जगह को स्टाइल किया जा सकता है:
video::backdrop {
background-color: goldenrod;
}
::marker
::marker
pseudo-एलिमेंट की मदद से, सूची में मौजूद आइटम के लिए बुलेट या नंबर को स्टाइल किया जा सकता है. इसके अलावा, <summary>
एलिमेंट के ऐरो को भी स्टाइल किया जा सकता है.
::marker {
color: hotpink;
}
ul ::marker {
font-size: 1.5em;
}
ol ::marker {
font-size: 1.1em;
}
summary::marker {
content: '\002B'' '; /* Plus symbol with space */
}
details[open] summary::marker {
content: '\2212'' '; /* Minus symbol with space */
}
सीएसएस प्रॉपर्टी का सिर्फ़ एक छोटा सबसेट, ::marker
के लिए काम करता है:
color
content
white-space
font
प्रॉपर्टीanimation
औरtransition
प्रॉपर्टी
content
प्रॉपर्टी का इस्तेमाल करके, मार्कर सिंबल बदला जा सकता है. उदाहरण के लिए, इसका इस्तेमाल <summary>
एलिमेंट की बंद और खाली स्थितियों के लिए, प्लस और माइनस का निशान सेट करने के लिए किया जा सकता है.
::selection
::selection
pseudo-एलिमेंट की मदद से, चुने गए टेक्स्ट के दिखने की स्टाइल को तय किया जा सकता है.
::selection {
background: green;
color: white;
}
ऊपर बताए गए डेमो में, चुने गए सभी टेक्स्ट की स्टाइल बदलने के लिए, बदली हुई पहचान वाले इस एलिमेंट का इस्तेमाल किया जा सकता है. इसे किसी और तरीके से चुनने के लिए, इसे अन्य सिलेक्टर के साथ भी इस्तेमाल किया जा सकता है.
p:nth-of-type(2)::selection {
background: darkblue;
color: yellow;
}
अन्य सूडो-एलिमेंट की तरह, सीएसएस प्रॉपर्टी के सिर्फ़ एक सबसेट की अनुमति है:
color
background-color
, लेकिनbackground-image
नहींtext
प्रॉपर्टी
::placeholder
फ़ॉर्म एलिमेंट के लिए हेल्पर संकेत जोड़े जा सकते हैं, जैसे कि placeholder
एट्रिब्यूट के साथ <input>
.
::placeholder
pseudo-एलिमेंट की मदद से, उस टेक्स्ट की स्टाइल बदली जा सकती है.
input::placeholder {
color: darkcyan;
}
::placeholder
, सिर्फ़ सीएसएस नियमों के किसी सबसेट के साथ काम करता है:
color
background
प्रॉपर्टीfont
प्रॉपर्टीtext
प्रॉपर्टी
::cue
सूडो एलिमेंट के इस टूर का आखिरी हिस्सा, ::cue
स्यूडो एलिमेंट है.
इससे WebVTT संकेतों को स्टाइल किया जा सकता है,
जो <video>
एलिमेंट के कैप्शन हैं.
आप सिलेक्टर को ::cue
में भी पास कर सकते हैं.
इससे आपको कैप्शन के अंदर खास एलिमेंट को स्टाइल करने की सुविधा मिलती है.
video::cue {
color: yellow;
}
video::cue(b) {
color: red;
}
video::cue(i) {
color: lightpink;
}
जांचें कि आपको कितना समझ आया
सूडो-एलिमेंट के बारे में अपनी जानकारी को परखें
इनमें से कौनसे एलिमेंट झूठे हैं?
::before
content: '';
को जोड़ना न भूलें.::first-paragraph
::after
content: '';
को जोड़ना न भूलें.::marker
::pencil
:active
बदली हुई पहचान वाले एलिमेंट, एचटीएमएल फ़ाइल में मिल सकते हैं.