सूडो एलिमेंट

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

जांचें कि आपको कितना समझ आया

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