2011-04-19 17 views
11
<div> 
<p> 
    Once upon a time.. 
</p> 
<p> 
    A beautiful princess.. 
</p> 
</div> 

मैं कैसे चुन सकता हूँ (मेरी सीएसएस में) इस div के अंदर पहले पैराग्राफ के पहले अक्षर के अंदर पहले पैराग्राफ के पहले अक्षर ??सीएसएस चयनकर्ता: एक div

धन्यवाद

लुका

उत्तर

19
div p:first-of-type:first-letter { font-weight: bold; } 
1

आप सीएसएस :first-letter छद्म तत्व का उपयोग कर सकते एक ब्लॉक स्तर तत्व के पहले अक्षर के लिए शैली लागू करने के लिए।

-1

हाँ, यह वास्तव में बहुत सरल है:

div p:first-letter 
-1

सीएसएस: पहला अक्षर चयनकर्ता

div p:first-letter{ 
color:blue; 
} 

Working example HERE

नोट: निम्नलिखित गुणों के साथ इस्तेमाल किया जा सकता: प्रथम अक्षर

फॉन्ट गुण, रंग गुण, पृष्ठभूमि गुण, मार्जिन गुण, गद्दी गुण, सीमा गुण, text-decoration, ऊर्ध्वाधर- align (केवल यदि नाव 'कोई नहीं' है), पाठ को बदलने, line-height, नाव, स्पष्ट

0

ठीक है, मैं अपने इच्छित अवयव पहले अक्षर स्टाइल में लागू करने के लिए कम से कम एक वर्ग जोड़ना होगा। मुझे यकीन है कि आप पहले div के पहले पैराग्राफ के लिए एक सीएसएस नियम कर सकते हैं; लेकिन अगर आपके पास शुरुआत में अनुच्छेद के साथ एक और div है, तो यह उन सभी पर लागू किया जा रहा है। दूसरे शब्दों में, आपके चयनकर्ता में कक्षा/आईडी का उपयोग किए बिना, इसे के पहले पैराग्राफ के पहले अक्षर पर लागू किया जाएगा प्रत्येक DIV (जो कि आप जिस व्यवहार को ढूंढ रहे हैं वह शायद नहीं हो सकता है)। तो मैं इस सिफारिश करेंगे:

<div> 
<p class="FirstLetter"> 
    Once upon a time.. 
</p> 
<p> 
    A beautiful princess.. 
</p> 
</div> 

और फिर अपने सीएसएस में:

.FirstLetter:first-letter { 
    // styling rules here 
} 

लेकिन मेरे अंतर्ज्ञान सही नहीं है और आप निश्चित रूप से पता है कि यह आपके लिए क्या देख रहे हैं, तो है अगर @Demian ब्रैच के जवाब को ठीक करना चाहिए।

6

कुछ मामलों में आप एक शीर्ष लेख या कुछ अन्य तत्वों प्रकार <p> से पहले उदाहरण के लिए हो सकता है:

<div>  
<h1>My Great Title</h1> 
<p> 
In my younger years I was a great man, but all that changed when I saw... 
</p> 
<p> 
I struck him for shaming my name, my family, my life. It was a shameful... 
</p> 
</div> 

तो इस मामले में, p:first-child किसी कारण के लिए क्रोम या में काम नहीं करेगा, कम से कम नहीं सफारी।

बजाय आप इस का उपयोग करना चाहेंगे:

div p:first-of-type:first-letter{ 
/* add your awesome code here */ 
} 

अपने समय के लिए धन्यवाद।

first-of-type

+1

इस के लिए धन्यवाद। : इस तरह की स्थिति में पहले प्रकार का निश्चित रूप से बेहतर होता है। –

-1

आप सीधे पूरे div के पहले अक्षर को लक्षित कर सकते हैं:

div:first-letter { 
    color: red; 
} 

डेमो: https://codepen.io/anon/pen/gRoypa

संबंधित मुद्दे