::first-lineछद्म तत्व एक तत्व की पहली पंक्ति शैलियों लागू करने के लिए है। एक पैराग्राफ की कल्पना करें जो कई पंक्तियों का लंबा है (जैसे यह एक!)। ::first-lineआपको पाठ की पहली पंक्ति को स्टाइल करने की अनुमति देता है। आप इसे बड़ा बनाने के लिए इस्तेमाल कर सकते हैं या स्टाइलिस्टिक पसंद के रूप में छोटे-कैप में सेट कर सकते हैं। इस छद्म तत्व द्वारा लक्षित पाठ की मात्रा लाइन लंबाई, व्यूपोर्ट चौड़ाई, फ़ॉन्ट-आकार, पत्र-रिक्ति, शब्द-रिक्ति जैसे कई कारकों पर निर्भर करती है। जैसे ही लाइन टूटती है, उसके बाद का टेक्स्ट अब चयनित नहीं होता है। ध्यान दें कि यहाँ कोई वास्तविक DOM तत्व नहीं चुना गया है (इस प्रकार "छद्म तत्व")।
इस छद्म तत्व केवल ब्लॉक स्तर तत्वों पर काम करता है (जब displayया तो के लिए सेट है block, inline-block, table-caption, table-cell)। यदि इनलाइन तत्व पर सेट किया जाता है, तो कुछ भी नहीं होता है, भले ही उस इनलाइन तत्व के भीतर एक लाइन ब्रेक हो।
यह भी ध्यान दें कि सभी गुणों का उपयोग एक नियमों वाले नियम में नहीं किया जा सकता है ::first-line। अधिकतर:
.element::first-line ( font-style:… font-variant:… font-weight:… font-size:… font-family:… line-height:… color:… word-spacing:… letter-spacing:… text-decoration:… text-transform:… background-color:… background-image:… background-position:… background-repeat:… background-size:… background-attachment:… )आधिकारिक सीएसएस विनिर्देश बताता है कि उपयोगकर्ता एजेंट अन्य संपत्तियों को अनुमति दे सकते हैं यदि वे ऐसा महसूस करते हैं:
यूएएस अन्य गुणों को भी लागू कर सकता है।
विशिष्टता के बारे में एक शब्द
निम्नलिखित डेमो दिखाता है कि ::first-lineकिसी भी प्रकार की विशिष्टता को कैसे पार करने में सक्षम है, यहां तक कि !important।
- 1 पैराग्राफ को एक टैग चयनकर्ता के माध्यम से ग्रे में सेट किया गया है
- 2 पैरापग्रे को एक वर्ग चयनकर्ता के माध्यम से ग्रे करने के लिए सेट किया गया है
- एक आयोजक चयनकर्ता के माध्यम से 3rd पैराग्राफ को ग्रे पर सेट किया गया है
- 4 पैरापैप को एक महत्वपूर्ण बैश के माध्यम से ग्रे करने के लिए सेट किया गया है
इसका कारण यह है कि छद्म तत्व को बाल तत्व की तरह माना जाता है, न कि मूल तत्व का एक हिस्सा। इसलिए आप इसके लिए जो नियम लागू करते हैं, वह सिर्फ इसके लिए होता है, माता-पिता के नियम बस इसे कैस्केड कर सकते हैं।
इसके अलावा, अपने ब्राउज़र का आकार बदलने के लिए यह देखने का प्रयास करें कि व्यूपोर्ट की चौड़ाई में बदलाव होने पर छद्म तत्व का व्यवहार कैसा है।
कोई भी नहीं है: अंतिम-पंक्ति या: nth-line, भले ही वह अच्छा होगा।
ब्राउज़र का समर्थन
| क्रोम | सफारी | फ़ायर्फ़ॉक्स | ओपेरा | अर्थात | एंड्रॉयड | आईओएस |
|---|---|---|---|---|---|---|
| हां | हां | हां | 3.5+ (पुराना) 9+ | 5.5+ (पुराना) 9+ | हां | हां |
चूंकि ::first-lineएक छद्म तत्व है, इसलिए इसे सीएसएस 2.1 में निर्दिष्ट दो कॉलोनों द्वारा उपसर्ग किया जाना चाहिए। हालाँकि कुछ ब्राउज़र केवल सिंगल-कोलोन सिंटैक्स (इंटरनेट एक्सप्लोरर 5.5 - 9 और ओपेरा 3.5 - 9) का समर्थन करते हैं।