css - कक्षा के साथ पहले तत्व के लिए सीएसएस चयनकर्ता




css-selectors (12)

मेरे पास कक्षा नाम 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>


अपने चयनकर्ता से मेल खाने के लिए, तत्व के पास red का वर्ग होना चाहिए और उसके माता-पिता का पहला बच्चा होना चाहिए।

<div>
    <span class="red"> <!-- MATCH -->
</div>

<div>
    <span>Blah</span>
    <p class="red"> <!-- NO MATCH -->
</div>

<div>
    <span>Blah</span>
    <div><p class="red"></div> <!-- MATCH -->
</div>

आप nth-of-type (1) का उपयोग कर सकते हैं, लेकिन सुनिश्चित करें कि साइट को आईई 7 इत्यादि का समर्थन करने की आवश्यकता नहीं है, अगर यह मामला बॉडी क्लास जोड़ने के लिए jQuery का उपयोग करता है तो आईई 7 बॉडी क्लास के माध्यम से तत्व तत्व का नाम ढूंढें, फिर जोड़ें एनएच-चाइल्ड स्टाइल में।


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

<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 से एक सीएसएस संदर्भ यहां दिया गया है।


उपर्युक्त उत्तर बहुत जटिल हैं।

.class: प्रथम प्रकार {}

यह प्रथम श्रेणी के वर्ग का चयन करेगा।


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

#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>

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

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>


मेरा मानना ​​है कि तुरंत बाद वाले तत्वों का चयन करने के लिए रिश्तेदार चयनकर्ता + का उपयोग करना, यहां सबसे अच्छा काम करता है (जैसा कि पहले सुझाया गया है)।

इस मामले के लिए इस चयनकर्ता का उपयोग करना भी संभव है

.home p:first-of-type

लेकिन यह तत्व चयनकर्ता वर्ग वर्ग नहीं है।

यहां आपके पास सीएसएस चयनकर्ताओं की अच्छी सूची है: https://kolosek.com/css-selectors/


लेखकों के सबसे प्रसिद्ध उदाहरणों में से एक यह गलतफहमी है कि :first-child कैसे काम करता है। सीएसएस 2 में पेश किया गया :first-child छद्म वर्ग अपने माता-पिता के पहले बच्चे का प्रतिनिधित्व करता है । बस। एक बहुत ही आम गलत धारणा है कि यह जो भी बाल तत्व शेष है, वह शेष यौगिक चयनकर्ता द्वारा निर्दिष्ट शर्तों से मेल खाने वाला पहला व्यक्ति है। चयनकर्ताओं के काम के कारण (एक स्पष्टीकरण के लिए here देखें), यह सच नहीं है।

चयनकर्ता स्तर 3 एक प्रस्तुत करता है :first-of-type छद्म-वर्ग , जो इसके तत्व प्रकार के भाई बहनों के बीच पहले तत्व का प्रतिनिधित्व करता है। यह उत्तर चित्रों के साथ, :first-child और :first-of-type बीच का अंतर बताता है। हालांकि, जैसा कि :first-child , यह किसी भी अन्य स्थितियों या विशेषताओं को नहीं देखता है। एचटीएमएल में, तत्व प्रकार टैग नाम से दर्शाया जाता है। सवाल में, वह प्रकार p

दुर्भाग्य से, कोई भी समान नहीं है :first-of-class किसी दिए गए वर्ग के पहले बच्चे तत्व से मेल खाने के लिए प्रथम :first-of-class छद्म श्रेणी। एक कामकाज कि ली वेरू और मैं इसके लिए आया (यद्यपि पूरी तरह से स्वतंत्र रूप से) पहले उस वर्ग के साथ अपने सभी तत्वों को अपनी वांछित शैलियों को लागू करना है:

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

... फिर एक ओवरराइडिंग नियम में सामान्य भाई संयोजक ~ का उपयोग करते हुए कक्षा के तत्वों के लिए शैलियों को पूर्ववत करें , पहले के बाद आते हैं :

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

अब class="red" साथ केवल पहला तत्व सीमा होगी।

नियमों को कैसे लागू किया जाता है इसका एक उदाहरण यहां दिया गया है:

<div class="home">
  <span>blah</span>         <!-- [1] -->
  <p class="red">first</p>  <!-- [2] -->
  <p class="red">second</p> <!-- [3] -->
  <p class="red">third</p>  <!-- [3] -->
  <p class="red">fourth</p> <!-- [3] -->
</div>
  1. कोई नियम लागू नहीं किया जाता है; कोई सीमा प्रदान नहीं की जाती है।
    इस तत्व में कक्षा red नहीं है, इसलिए यह छोड़ा गया है।

  2. केवल पहला नियम लागू होता है; एक लाल सीमा प्रदान की जाती है।
    इस तत्व में कक्षा red , लेकिन यह इसके माता-पिता में red किसी भी तत्व से पहले नहीं है। इस प्रकार दूसरा नियम लागू नहीं होता है, केवल पहला, और तत्व इसकी सीमा रखता है।

  3. दोनों नियम लागू होते हैं; कोई सीमा प्रदान नहीं की जाती है।
    इस तत्व में कक्षा red । यह कक्षा red साथ कम से कम एक अन्य तत्व से पहले भी है। इस प्रकार दोनों नियम लागू होते हैं, और दूसरी border घोषणा पहले को ओवरराइड करती है, जिससे बोलने के लिए "पूर्ववत" होता है।

बोनस के रूप में, हालांकि इसे चयनकर्ता 3 में पेश किया गया था, लेकिन सामान्य भाई संयोजक वास्तव में आईई 7 और नए द्वारा बहुत अच्छी तरह से समर्थित है, इसके विपरीत :first-of-type और :nth-of-type() जो केवल IE9 के बाद समर्थित है । यदि आपको अच्छे ब्राउज़र समर्थन की आवश्यकता है, तो आप भाग्य में हैं।

वास्तव में, तथ्य यह है कि भाई संयोजक इस तकनीक में एकमात्र महत्वपूर्ण घटक है, और इसमें इस तरह का अद्भुत ब्राउज़र समर्थन है, इस तकनीक को बहुत बहुमुखी बनाता है - आप क्लास चयनकर्ताओं के अलावा अन्य चीजों के द्वारा तत्वों को फ़िल्टर करने के लिए इसे अनुकूलित कर सकते हैं:

  • आप इसे चारों ओर काम करने के लिए उपयोग कर सकते हैं :first-of-type आईई 7 और आईई 8 में :first-of-type का, बस एक वर्ग चयनकर्ता के बजाय एक प्रकार चयनकर्ता की आपूर्ति करके (फिर से, इसके बाद के अनुभाग में इसके गलत उपयोग पर अधिक):

    article > p {
        /* Apply styles to article > p:first-of-type, which may or may not be :first-child */
    }
    
    article > p ~ p {
        /* Undo the above styles for every subsequent article > p */
    }
    
  • आप कक्षा चयन के बजाय विशेषता चयनकर्ताओं या किसी अन्य साधारण चयनकर्ता द्वारा फ़िल्टर कर सकते हैं।

  • आप pseudo-elements साथ इस ओवरराइडिंग तकनीक को भी जोड़ सकते हैं, भले ही छद्म-तत्व तकनीकी रूप से सरल चयनकर्ता नहीं हैं।

ध्यान दें कि इसे काम करने के लिए, आपको पहले से जानना होगा कि आपके अन्य भाई तत्वों के लिए डिफ़ॉल्ट शैलियों क्या होगी ताकि आप पहले नियम को ओवरराइड कर सकें। इसके अतिरिक्त, चूंकि इसमें सीएसएस में नियमों को ओवरराइड करना शामिल है, इसलिए आप चयनकर्ता एपीआई या सेलेनियम के सीएसएस लोकेटर के उपयोग के लिए एक ही चयनकर्ता के साथ एक ही चीज़ प्राप्त नहीं कर सकते हैं।

यह उल्लेखनीय है कि चयनकर्ता 4 ने :nth-child() नोटेशन (मूल रूप से एक पूरी तरह से नया छद्म-वर्ग कहा जाता है :nth-match() ) का विस्तार किया है, जो आपको कुछ ऐसा करने की अनुमति देगा :nth-child(1 of .red) एक hypothetical के बदले में .red:first-of-class । एक अपेक्षाकृत हालिया प्रस्ताव होने के नाते, अभी तक उत्पादन साइटों में उपयोग करने योग्य होने के लिए पर्याप्त अंतःक्रियात्मक कार्यान्वयन नहीं हैं। उम्मीद है कि यह जल्द ही बदल जाएगा। इस बीच, मैंने सुझाए गए कामकाज को ज्यादातर मामलों के लिए काम करना चाहिए।

ध्यान रखें कि यह उत्तर मानता है कि प्रश्न प्रत्येक प्रथम बाल तत्व की तलाश में है जिसमें एक दिया गया वर्ग है। पूरे दस्तावेज में एक जटिल चयनकर्ता के एनएच मैच के लिए न तो छद्म-वर्ग और न ही एक सामान्य सीएसएस समाधान है - चाहे कोई समाधान मौजूद है, दस्तावेज़ संरचना पर भारी निर्भर करता है। jQuery प्रदान करता है :eq() :first :last इस उद्देश्य के लिए :last और अधिक, लेकिन फिर से ध्यान दें कि वे बहुत अलग तरीके से कार्य करते हैं :nth-child() et al । चयनकर्ता एपीआई का उपयोग करके, आप या तो पहला मैच प्राप्त करने के लिए document.querySelector() का उपयोग कर सकते हैं:

var first = document.querySelector('.home > .red');

या किसी भी विशिष्ट मैच को चुनने के लिए index.querySelectorAll document.querySelectorAll() को इंडेक्सर के साथ उपयोग करें:

var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redElements[1];
// etc

हालांकि फिलिप Daubmeier द्वारा मूल स्वीकृत उत्तर में .red .red:nth-of-type(1) समाधान (जिसे मूल रूप से Martyn द्वारा लिखा गया था लेकिन बाद में हटा दिया गया था), यह उस तरीके से व्यवहार नहीं करता जिस तरह से आप इसकी उम्मीद करेंगे।

उदाहरण के लिए, यदि आप केवल अपने मूल मार्कअप में p चुनना चाहते हैं:

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

... तो आप इसका उपयोग नहीं कर सकते .red:first-of-type ( .red:nth-of-type(1) बराबर), क्योंकि प्रत्येक तत्व पहला (और केवल) इसके प्रकार में से एक है ( 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>

.red:first-of-type साथ नियम लागू करना .red:first-of-type का काम करेगा, लेकिन एक बार जब आप कक्षा के बिना कोई अन्य p जोड़ते हैं:

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

... चयनकर्ता तुरंत विफल हो जाएगा, क्योंकि पहला .red तत्व अब दूसरा p तत्व है।


सही जवाब है:

.red:first-child, :not(.red) + .red { border:5px solid red }

भाग I: यदि तत्व अपने माता-पिता के लिए पहला है और वर्ग "लाल" है, तो उसे सीमा मिल जाएगी।
भाग II: यदि ".red" तत्व अपने माता-पिता के लिए पहले नहीं है, लेकिन कक्षा ".red" के बिना तुरंत तत्व का पालन कर रहा है, तो यह भी सीमा के सम्मान के लायक होगा।

मूर्ख या ऐसा नहीं हुआ।

फिलिप Daubmeier का जवाब, स्वीकार किए जाने पर, सही नहीं है - संलग्न पहेली देखें।
बोल्टक्लॉक का जवाब काम करेगा, लेकिन अनावश्यक रूप से शैलियों को परिभाषित करता है और ओवरराइट करता है
(विशेष रूप से एक मुद्दा जहां यह अन्यथा एक अलग सीमा का वारिस करेगा - आप सीमा पर अन्य घोषित नहीं करना चाहते हैं: कोई भी नहीं)

संपादित करें: यदि आपके पास कई बार गैर-लाल के बाद "लाल" होता है, तो प्रत्येक "पहले" लाल को सीमा मिल जाएगी। इसे रोकने के लिए, किसी को बोल्टक्लॉक के जवाब का उपयोग करने की आवश्यकता होगी। fiddle देखें


इस सरल और प्रभावी कोशिश करें

 .home > span + .red{
      border:1px solid red;
    }

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

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




css-selectors