एक विशिष्ट वर्ग के साथ एक div में पहले पैराग्राफ का चुनाव कैसे करें (सीएसएस 2)

Question

मैं एक <div> युक्त कई <p> तत्वों है और एक विशिष्ट वर्ग (cnt) के साथ हर <div> अंदर केवल पहले <p> करने के लिए कुछ शैली लागू करने की आवश्यकता।

कृपया ध्यान दें कि यह प्रश्न SO पर दूसरों के समान दिखाई दे सकता है, लेकिन मुझे जिस भूमिका की आवश्यकता है वह केवल cnt कक्षा के लिए लागू होनी चाहिए, जो इसे अलग बनाती है।

//I use YUI 3 Reset and Grid: 
<link href="http://yui.yahooapis.com/3.4.0/build/cssfonts/fonts.css" rel="stylesheet" type="text/css" /> 
<link href="http://yui.yahooapis.com/3.4.0/build/cssgrids/grids.css" rel="stylesheet" type="text/css" /> 

     <div class="cnt"> 
      <p>Number 1</p> 
      <p>Number 2</p> 
      <p>Number 3</p> 
     </div> 


      // I'm using this class without success!" 
      .cnt p:first-child 
      { 
       background-color:Red; 
      } 

    // Other classes could create some conflict 
    .cnt p 
    { 
     margin: 10px 0px 10px 0px; 
    } 
    .cnt h2, .cnt h3, .cnt h4, .cnt h5, .cnt h6 
    { 
     font-size: 16px; 
     font-weight: 700; 
    } 
    .cnt ul, .cnt ol 
    { 
     margin: 10px 0px 10px 30px; 
    } 
    .cnt ul > li 
    { 
     list-style-type: disc; 
    } 
    .cnt ol > li 
    { 
     list-style-type: decimal; 
    } 
    .cnt strong 
    { 
     font-weight:700; 
    } 
    .cnt em 
    { 
     font-style:italic; 
    } 
    .cnt hr 
    { 
     border:0px; 
     height:1px; 
     background-color:#ddddda; 
     margin:10px 0px 10px 0px; 
    } 
    .cnt del 
    { 
     text-decoration:line-through; 
     color:Red; 
    } 
    .cnt blockquote 
    { margin: 10px; 
     padding: 10px 10px; 
     border: 1px dashed #E6E6E6; 
    } 
    .cnt blockquote p 
    { 
     margin: 0; 
    } 

पुनश्च: मैं इसे CSS 2 में की जरूरत है (न तो कम CSS3: की पहली प्रकार महान काम करता है)

Answer 1

आपका उदाहरण ठीक

Demo

वैकल्पिक काम करना चाहिए विधि

Live Demo

first-of-type चयनकर्ता का उपयोग करने का प्रयास करें।

.cnt p:first-of-type{ 
    background-color:Red; 
} 

यह एक CSS3 चयनकर्ता है और आईई 8 पर काम नहीं करेगा।

Answer 2

यहां एक अलग विधि का उपयोग करके एक उदाहरण है, जिसका उपयोग नहीं किया जा रहा है: पहला बच्चा।

http://jsfiddle.net/chricholson/dp3vK/6/

यह सब पी टैग (सामान्य स्टाइल पाने के लिए) के लिए एक शैली सेट करना शामिल है, तो केवल जहां एक पी टैग के बाद एक पी टैग अधिक शैलियों से प्रभावित हो जाएगा है। आप इसे अपने लाभ के लिए उपयोग कर सकते हैं, पहले टैग की शैली रखने के लिए सभी पी टैग सेट करें, फिर अन्य लोगों के लिए ओवरराइट करें

Answer 3

एक चीज जो लोग हमेशा भूल जाते हैं निकटवर्ती चयनकर्ता हैं, जो काम (कुछ हद तक) IE7 +, इस प्रयास करें:

एचटीएमएल

<div class="paragraph"> 
    <p>some paragraph</p> 
    <p>some paragraph</p> 
    <p>some paragraph</p> 
    <p>some paragraph</p> 
    <p>some paragraph</p> 
</div> 

सीएसएस

p { 
    color:black; 
} 

.paragraph p { 
    color:red; 
} 

.paragraph p + p { 
    color:black; 
} 

http://jsfiddle.net/andresilich/AHHrF/