सूडो एलिमेंट

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

: 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 स्यूडो-एलिमेंट की मदद से, सूची के आइटम के लिए बुलेट या नंबर या <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

Browser Support

• 57
• 79
• 51
• 10.1

Source

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

input::placeholder {
  color: darkcyan;
}

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

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

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

::cue

Browser Support

• 26
• 79
• 55
• 7

Source

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

यह एक स्यूडो-क्लास है, न कि स्यूडो-एलिमेंट.

सूडो-एलिमेंट, एचटीएमएल फ़ाइल में मिल सकते हैं.

सही

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

गलत

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