सूडो एलिमेंट

सीएसएस पॉडकास्ट - 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;
}

देखें कि आपको कितना समझ आया है

नकली एलिमेंट के बारे में अपनी जानकारी को परखें