[Css] कक्षा के साथ पहले तत्व के लिए सीएसएस चयनकर्ता


Answers

:first-child माता-पिता टैग के पहले बच्चे का चयन करने के लिए, नाम के समान :first-child चयनकर्ता का इरादा है। बच्चों को एक ही पैरेंट टैग में एम्बेड किया जाना है। आपका सटीक उदाहरण काम करेगा (बस इसे here ):

<body>
    <p class="red">first</p>
    <div class="red">second</div>
</body>

हो सकता है कि आपने अपने टैग को अलग-अलग पैरेंट टैग में घोंसला दिया हो? क्या कक्षा के आपके टैग वास्तव में माता-पिता के नीचे पहला टैग red ?

ध्यान दें कि यह केवल पूरे दस्तावेज़ में पहले ऐसे टैग पर लागू नहीं होता है, लेकिन प्रत्येक बार जब कोई नया माता-पिता इसके चारों ओर लपेटा जाता है, जैसे:

<div>
    <p class="red">first</p>
    <div class="red">second</div>
</div>
<div>
    <p class="red">third</p>
    <div class="red">fourth</div>
</div>

first और third लाल हो जाएगा।

अद्यतन करें:

मुझे नहीं पता कि मार्टिन ने अपना जवाब क्यों हटा दिया, लेकिन उसके पास समाधान था :nth-of-type selector:

<html>
<head>
<style type="text/css">
.red:nth-of-type(1)
{
    border:5px solid red;
} 
</style>
</head>

<body>
    <div class="home">
        <span>blah</span>
        <p class="red">first</p>
        <p class="red">second</p>
        <p class="red">third</p>
        <p class="red">fourth</p>
    </div>
</body>
</html>

Martyn लिए क्रेडिट। उदाहरण के लिए here अधिक जानकारी। ध्यान रखें कि यह एक सीएसएस 3 चयनकर्ता है, इसलिए सभी ब्राउज़र इसे पहचान नहीं पाएंगे (उदाहरण के लिए IE8 या पुराने)।

Question

मेरे पास कक्षा नाम red तत्वों का एक गुच्छा है, मैं निम्नलिखित सीएसएस नियम का उपयोग कर class="red" साथ पहला तत्व चुनने के लिए प्रतीत नहीं कर सकता:

 .red:first-child{
      border:5px solid red;
    }
 <p class="red"></p>
 <div class="red"></div>


   

इस चयनकर्ता में क्या गलत है और मैं इसे कैसे ठीक करूं?

अद्यतन :

टिप्पणियों के लिए धन्यवाद, मुझे पता चला कि तत्व को चुनने के लिए अपने माता-पिता का पहला बच्चा होना चाहिए जो मेरे पास नहीं है। मेरे पास निम्न संरचना है, और यह नियम टिप्पणियों में उल्लिखित विफल रहता है:

.home .red:first-child{
      border:1px solid red;
    }
    <div class="home">
      <span>blah</span>
      <p class="red">first</p>
      <p class="red">second</p>
      <p class="red">third</p>
      <p class="red">fourth</p>
    </div>

    

मैं red बच्चे के साथ पहले बच्चे को कैसे लक्षित कर सकता हूं?




अपनी समस्या के लिए यह आसान कोड आज़माएं

codpen link http://codepen.io/santoshkhalse/pen/xRQYpo

 .home p:first-of-type {
  border:5px solid red;
  width:100%;
  display:block;
}
<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>




आप first-of-type या nth-of-type(1) उपयोग कर सकते हैं

.red {
  color: green;  
}

/* .red:nth-of-type(1) */
.red:first-of-type {
  color: red;  
}
<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>




आप इसे पाने के लिए अपने कोड को इस तरह से बदल सकते हैं

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

यह आपके लिए नौकरी करता है

.home span + .red{
      border:3px solid green;
    }

SnoopCode बारे में SnoopCode से एक सीएसएस संदर्भ यहां दिया गया है।




मुझे यह मेरी परियोजना में मिला।

div > .b ~ .b:not(:first-child) {
	background: none;
}
div > .b {
    background: red;
}
<div>
      <p class="a">The first paragraph.</p>
      <p class="a">The second paragraph.</p>
      <p class="b">The third paragraph.</p>
      <p class="b">The fourth paragraph.</p>
  </div>




किसी कारण से उपर्युक्त उत्तर में से कोई भी वास्तविक पहले और माता-पिता के पहले बच्चे के मामले को संबोधित नहीं कर रहा था।

#element_id > .class_name:first-child

यदि आप इस कोड के भीतर केवल प्रथम श्रेणी के बच्चे को शैली लागू करना चाहते हैं तो उपर्युक्त उत्तर विफल हो जाएंगे।

<aside id="element_id">
  Content
  <div class="class_name">First content that need to be styled</div>
  <div class="class_name">
    Second content that don't need to be styled
    <div>
      <div>
        <div class="class_name">deep content - no style</div>
        <div class="class_name">deep content - no style</div>
        <div>
          <div class="class_name">deep content - no style</div>
        </div>
      </div>
    </div>
  </div>
</aside>



इसे इस्तेमाल करे :

    .class_name > *:first-child {
        border: 1px solid red;
    }



चूंकि अन्य उत्तरों में यह शामिल है कि इसमें क्या गड़बड़ है, मैं इसे दूसरी छमाही, इसे ठीक करने का प्रयास करूंगा। दुर्भाग्यवश, मुझे नहीं पता कि आपके पास केवल एक सीएसएस है, कम से कम ऐसा नहीं कि मैं सोच सकता हूं । यद्यपि कुछ अन्य विकल्प हैं ....

  1. जब आप इसे उत्पन्न करते हैं तो तत्व को first श्रेणी असाइन करें, इस तरह:

    <p class="red first"></p>
    <div class="red"></div>
    

    सीएसएस:

    .first.red {
      border:5px solid red;
    }
    

    यह सीएसएस केवल first और red वर्गों के साथ तत्वों से मेल खाता है।

  2. वैकल्पिक रूप से, जावास्क्रिप्ट में ऐसा ही करें, उदाहरण के लिए यहां पर जो jQuery आप इसे करने के लिए उपयोग करेंगे, उपरोक्त के समान सीएसएस का उपयोग करके:

    $(".red:first").addClass("first");
    



Links