सीएसएस पॉडकास्ट - 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
pseudo-elements किसी एलिमेंट के अंदर सिर्फ़ चाइल्ड एलिमेंट बनाता है. ऐसा तब होता है, जब आपने 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-element से आपको किसी सूची आइटम के लिए बुलेट या संख्या या <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
सूडो-एलिमेंट की मदद से, चुने गए टेक्स्ट के लुक को स्टाइल किया जा सकता है.
::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
सूडो-एलिमेंट की मदद से, उस टेक्स्ट को स्टाइल किया जा सकता है.
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;
}
देखें कि आपको कितना समझ आया है
नकली एलिमेंट के बारे में अपनी जानकारी को परखें
इनमें से कौनसे एलिमेंट नकली नहीं हैं?
::after
::first-paragraph
::before
::pencil
::marker
:active
बदली हुई पहचान वाले एलिमेंट, एचटीएमएल फ़ाइल में मिल सकते हैं.