सूडो एलिमेंट

सीएसएस पॉडकास्ट - 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> जैसे एलिमेंट काम नहीं करेंगे.

: input[type="checkbox"] एक अपवाद है. सूडो-एलिमेंट चाइल्ड शामिल हो सकते हैं.

::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-letter का इस्तेमाल किया जा सकता है. इसलिए, अगर आप इसे किसी ऐसे एलिमेंट में जोड़ने की कोशिश करते हैं जिसमें display: inline है, तो यह काम नहीं करेगा.

::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

ब्राउज़र सहायता

• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 57
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 79
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 51
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 10.1

सोर्स

फ़ॉर्म एलिमेंट में हेल्पर हिंट जोड़ा जा सकता है, जैसे कि placeholder एट्रिब्यूट के साथ <input>. ::placeholder सूडो-एलिमेंट की मदद से, उस टेक्स्ट को स्टाइल किया जा सकता है.

input::placeholder {
  color: darkcyan;
}

::placeholder, सीएसएस के नियमों के सिर्फ़ एक सबसेट पर काम करता है:

• color
• background प्रॉपर्टी
• font प्रॉपर्टी
• text प्रॉपर्टी

ध्यान दें: placeholder, <label> नहीं है और <label> की जगह इसका इस्तेमाल नहीं किया जाना चाहिए. फ़ॉर्म के एलिमेंट को लेबल करना ज़रूरी है. ऐसा न करने पर, उन्हें ऐक्सेस नहीं किया जा सकेगा.

::cue

ब्राउज़र सहायता

• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 26
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 79
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 55
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 7

सोर्स

सूडो एलिमेंट के इस सफ़र में, सबसे आखिर में ::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

यह एक pseudo-class है, न कि pseudo-element.

बदली हुई पहचान वाले एलिमेंट, एचटीएमएल फ़ाइल में मिल सकते हैं.

सही

DevTools एलिमेंट पैनल में सूडो-एलिमेंट दिखा सकता है. हालांकि, एचटीएमएल में सूडो-एलिमेंट नहीं दिखेंगे. इन पर ब्राउज़र का मालिकाना हक होता है.

गलत

उन्हें सीएसएस से टारगेट किया जा सकता है, लेकिन वे एचटीएमएल में नहीं मिलेंगे.