:: पहला अक्षर - सीएसएस-ट्रिक्स

Anonim

::first-letterएक छद्म तत्व है जो आपको अपने HTML में उस पहले अक्षर के चारों ओर एक टैग चिपकाए बिना एक तत्व में पहले अक्षर को स्टाइल करने की अनुमति देता है। जबकि DOM में कोई टैग नहीं जोड़ा गया है, यह ऐसा है जैसे किसी टैग में लक्षित पहला अक्षर शामिल किया गया हो । आप उस पहले अक्षर को स्टाइल कर सकते हैं जैसा कि आप एक वास्तविक तत्व के साथ करेंगे:

p::first-letter ( font-weight: bold; color: red; )

The first letter is bold and red

परिणाम यह है जैसे कि आपके पास पहले अक्षर के चारों ओर एक अशुद्ध तत्व था:


The first letter is bold and red.

पहला अक्षर बोल्ड और रेड है

  • छद्म तत्व केवल तभी काम करता है जब मूल तत्व एक ब्लॉक कंटेनर बॉक्स होता है (दूसरे शब्दों में, यह display: inline;तत्वों के पहले अक्षर पर काम नहीं करता है ।)
  • यदि आपके पास एक तत्व पर ::first-letterऔर दोनों ::first-lineपर है, तो पहला अक्षर पहली पंक्ति की शैलियों से विरासत में मिलेगा, लेकिन वसीयतनामा की शैलियों को ::first-letterस्टाइल संघर्ष से अलग कर दिया जाएगा।
  • यदि आप सामग्री के साथ उत्पन्न करते हैं ::before, तो पहला अक्षर या विराम चिह्न वर्ण, चाहे वह मूल पाठ नोड का हिस्सा हो या उत्पन्न सामग्री के साथ बनाया गया हो, लक्ष्य होगा।

अधिक जानकारी

  • ड्रॉप-कैप के लिए उपयोग करते समय, संयोजन के साथ उपयोग करें p:first-of-typeताकि हर पहला अक्षर स्टाइल न हो
  • उदाहरण कलम - उत्पन्न सामग्री के साथ
  • डब्ल्यू 3 सी विकी
  • W3C CSS3 चयनकर्ता मॉड्यूल

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम फ़ायर्फ़ॉक्स अर्थात एज सफारी
3.5 है १२ 5.1

मोबाइल / टेबलेट

Android क्रोम Android फ़ायरफ़ॉक्स एंड्रॉयड iOS सफारी
88 .५ 5.0-5.1

नोट: इंटरनेट एक्सप्लोरर 8 और नीचे के लिए, :first-letterडबल-कॉलन संकेतन के बजाय एक ही कोलन का उपयोग करें ।