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

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?

Comments

उन लोगों के लिए जो मेरे उदाहरण (p, div) में विभिन्न प्रकार के तत्वों के कारण भ्रमित हो रहे हैं, जिससे वे भी काम नहीं कर रहे हैं और समस्या अभी भी मौजूद है।

— रजत

मुझे लगता है कि यह इस प्रकार है: पहले बच्चे के चयनकर्ता को काम करना चाहिए था ...

— फेलिक्स ईव

: पहला बच्चा तब बहुत अच्छा नाम नहीं होगा। यदि आपके पास एक बेटा और फिर एक बेटी होती, तो आप अपनी बेटी को अपने जेठा नहीं कहते। इसी तरह, पहला .home> .red, .home का पहला बच्चा नहीं है, इसलिए इसे इस तरह से कॉल करना अनुचित होगा।

— BoltClock

नहीं, यह है कि कैसे: पहले-प्रकार का काम करना चाहिए था

— इवान थॉम्पसन

@EvanThompson यही काम :first-of-type करता है ।

— टाइलर

Answer 1

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

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

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

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

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

  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 */
  }

• आप कक्षाओं के बजाय विशेषता चयनकर्ताओं या किसी अन्य सरल चयनकर्ताओं द्वारा फ़िल्टर कर सकते हैं।

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

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

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

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

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

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

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

---

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

उदाहरण के लिए, यदि आप केवल 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से काम चल जाएगा, लेकिन एक बार जब आप 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 तत्व है।

Comments

तो, क्या कोई अनुकरण करने का कोई तरीका है :last-of-class? किसी वर्ग के अंतिम तत्व का चयन करें।

— रॉकेट हज़मत

@ लॉकेट: ऐसा नहीं कि मैं देख सकता हूँ :(

— बोल्टॉक

सिबलिंग के साथ अच्छी तकनीक। यह कई सिबलिंग कॉम्बिनेटरों के साथ भी काम करने लायक हो सकता है, उदाहरण के लिए p ~ p ~ p तीसरे आइटम का चयन करेगा और उससे आगे: jsfiddle.net/zpnvedm/1

— लेगोलस

@BoltClock हाँ, क्षमा करें, मैं एक समाधान के लिए यहां आया था और मैंने ओपी विशिष्ट मामले के बारे में इतना ध्यान नहीं दिया। मैं वास्तव में यह नहीं समझ सकता कि एक विशिष्ट प्रकार के लिए general sibling selector ~काम क्यों करता है :not(:first-of-*), मेरा मानना ​​है कि इसे प्रत्येक मिलान तत्व पर नियम लागू करना चाहिए, लेकिन यह केवल पहले मैच के लिए ही लागू होता है जब 3 या अधिक संभावित मैच होते हैं।

— गेरार्ड ने 13

कैनीयूज के अनुसार :nth-child(1 of .foo)विस्तार को सफारी 9.1+ पर पहले ही लागू किया जा चुका है। (मैंने हालांकि जाँच नहीं की है)

— डेनफील्ड

Answer 2

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

<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चयनकर्ता:

.red:nth-of-type(1)
{
    border:5px 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>

मार्टिन को श्रेय । यहाँ उदाहरण के लिए और अधिक जानकारी । विदित हो कि यह CSS 3 चयनकर्ता है, इसलिए सभी ब्राउज़र इसे नहीं पहचानेंगे (जैसे IE8 या पुराने)।

Comments

यह मेरी गलती हो सकती है - जैसा कि मैंने मार्टिन को बताया है कि एक CSS3 चयनकर्ता :nth-of-typeआईई के किसी भी वर्तमान संस्करण में बिल्कुल भी काम नहीं करने की मामूली समस्या से ग्रस्त है।

— मेर Mrlygsson

मुझे यह पढ़कर थोड़ा भ्रम हुआ। कड़ाई .red:nth-of-type(1)से किसी भी तत्व का चयन किया जाएगा जो (ए) अपने तत्व प्रकार का पहला बच्चा है, और (बी) के पास "लाल" वर्ग है। इसलिए, यदि उदाहरण में, पहले <p> में वर्ग "लाल" नहीं था, तो इसका चयन नहीं किया जाएगा। वैकल्पिक रूप से यदि <span> और पहले <p> दोनों में वर्ग "लाल" था, तो वे दोनों चुने जाएंगे। jsfiddle.net/fvAxn

— डेविड

@ दान मुंडी: :first-of-typeके बराबर है :nth-of-type(1), तो निश्चित रूप से यह भी काम करता है। यह भी विफल हो सकता है, उसी तरह, मेरे उत्तर में भी उसी कारण से कहा जा सकता है।

— BoltClock

@ डेविड मुझे यकीन है कि :nth-of-typeइसका अर्थ "तत्व / टैग" है जब यह "प्रकार" कहता है। तो यह केवल तत्व को मानता है, न कि कक्षाओं जैसी चीजों को।

— gcampbell

@gcampbell: हां, इसका ठीक यही मतलब है, और यही कारण है कि यह जवाब त्रुटिपूर्ण है। कारण "प्रकार" चुना गया था इसलिए HTML / XML के साथ चयनकर्ताओं को जोड़े नहीं, क्योंकि सभी भाषाओं में "टैग" की अवधारणा नहीं है जो तत्वों को परिभाषित करते हैं।

— BoltClock

Answer 3

सही जवाब है:

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

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

फिडल या ऐसा नहीं हुआ।

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

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

Comments

यह जवाब गलत नहीं है, चयनकर्ता है दी मार्कअप के लिए सही है, लेकिन मैं दोहराना चाहिए कि स्थिति संपादित में उल्लेख किया है कारण है कि मैं राज्य है कि एक ओवरराइड आवश्यक है कम से कम जब आप मार्कअप संरचना गारंटी नहीं दे सकते है - सिर्फ एक वजह .redइस :not(.red)तरह से यह हमेशा .redअपने भाई-बहनों के बीच पहला नहीं होता है । और अगर सीमा को विरासत में प्राप्त करने की आवश्यकता है, तो यह ओवरराइड नियम के border: inheritबजाय केवल घोषणा करने की बात है border: none।

— BoltClock

यह समाधान सबसे अच्छा IMO है क्योंकि आप आसानी से अंतिम बच्चे के लिए भी ऐसा कर सकते हैं।

— A1rPun

@ A1rPun अंतिम बच्चे के लिए आप इसे कैसे बदलते हैं?

— विल्म

@Willem बस बदल first-childजाता है last-child, लेकिन मैं परीक्षण के बाद देखता हूं कि यह हमेशा चाल नहीं करता है।

— A1PPun

मुझे खेद है, लेकिन यह "प्रथम बाल तत्व से मेल खाता है जो वर्ग .red" से मेल नहीं खाता है, इसके बजाय यह "प्रथम तत्व से मेल खाता है अगर यह एक .red तत्व के बाद .red और पहले का तत्व है"। ये दोनों समान नहीं हैं।

— फिडेल

Answer 4

आप उपयोग कर सकते हैं 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>

Comments

यदि आपके पास और कक्षा के साथ आपका पहला तत्व है <p></p>, तो यह काम नहीं करेगा । इस JSFiddle को देखो । spanpred

— फ्रांसिस्को रोमेरो

मैंने अब देखा कि यह उसके उत्तर के अंतिम उदाहरण में उसी व्यवहार को दोहराता है जो मैंने यहां बताया था। जब मैंने आपके उदाहरण की कोशिश की और "थोड़ा" खेला, तो मैंने उस व्यवहार को नोटिस किया और मैं चाहता था कि भविष्य के पाठक इससे अवगत होंगे।

— फ्रांसिस्को रोमेरो

Answer 5

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

.class:first-of-type { }

यह प्रथम प्रकार के वर्ग का चयन करेगा। एमडीएन स्रोत

Comments

मुझे प्रथम-प्रकार का कोई संदर्भ नहीं मिल रहा है, और पहला-प्रकार केवल टैग नाम पर लागू होता है; क्या आपको यकीन है कि यह उत्तर सही है?

— मैट ब्रोच

first-type को नाम दिया गया है first-of-type

— गेब्रियल मेले

यह कक्षाओं के साथ काम नहीं करता है। यह है कि यह कैसे काम करना चाहिए , क्योंकि किसी वर्ग के nth को चुनना किसी टैग के nth को चुनने से ज्यादा उपयोगी होगा। लेकिन ': प्रथम-प्रकार' ने केवल टैगनेम से काम किया है। यदि ऐसा होता है तो 'प्रथम श्रेणी' और 'प्रथम-टैग' एक ही तत्व को संदर्भित करते हैं, जो वे अक्सर करते हैं, यह सोचकर खुद को भ्रमित करना आसान है कि यह उस तरह से काम करता है; और फिर यह सोचकर कि जब आप किसी ऐसे मामले में आते हैं, तो वे क्या टूट जाते हैं।

— इवान थॉम्पसन

निश्चित नहीं कि यह चयनित उत्तर क्यों नहीं है। यह वही करता है जो ओपी पूछ रहा था, और पूरी तरह से काम करता है। SMH।

— बर्नस्टो

@ बर्नस्टो, जब आपके पास एक ऐसा मामला होता है जहां आपके पास एक ही "प्रकार" के कई तत्व होते हैं <span>, तो हम कहते हैं , और कुछ के पास वर्ग है highlight। .highlight:first-of-typeचयनकर्ता पहले से चयनित वर्ग के साथ "प्रकार", इस उदाहरण में का पहला उदाहरण का चयन करेंगे <span>, और न वर्ग का पहला उदाहरण highlight। केवल उस अवधि के पहले उदाहरण में भी वर्ग पर प्रकाश डाला गया तो शैली को लागू किया जाएगा। ( codepen.io/andrewRmillar/pen/poJKJdJ )

— Sl4rtib4rtf4st

Answer 6

अपने चयनकर्ता से मेल खाने के लिए, तत्व का एक वर्ग नाम 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>

Comments

यह सही है और यह मेरी समस्या प्रतीत होती है लेकिन क्या किसी वर्ग के साथ पहले तत्व का चयन करने का कोई तरीका है चाहे वह अन्य तत्वों द्वारा पूर्ववर्ती हो?

— रजत

यदि आपने मार्टिंस के उत्तर को देखा था तो आपको यह पूछने की ज़रूरत नहीं थी :)

— फिलिप ड्युबैमियर

Answer 7

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

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

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

   सीएसएस:

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

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

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

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

Comments

मैं थोड़ी देर पहले सीएसएस-केवल समाधान के साथ आया था ; मैंने इसे यहां एक विहित उत्तर के रूप में पुन: प्रस्तुत किया है।

— BoltClock

जब तक ऐसा कुछ नहीं होता है :first-of-class, मैं पहले तत्व में एक अतिरिक्त वर्ग जोड़ने का सुझाव दूंगा। अब के लिए सबसे आसान समाधान लगता है।

— काई नैक सेप

Answer 8

मुझे यह अपने प्रोजेक्ट में मिला है।

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>

Answer 9

आपकी अद्यतन समस्या के अनुसार

<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:1px solid red;
    }

यह क्लास होम , फिर एलिमेंट स्पैन और आखिरकार ऑल .red एलिमेंट्स का चयन करेगा जो स्पैन एलिमेंट्स के तुरंत बाद रखे गए हैं।

संदर्भ: http://www.w3schools.com/cssref/css_selectors.asp

Answer 10

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

Answer 11

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

<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 से एक CSS संदर्भ है।

Answer 12

मैं सीएसएस के नीचे का उपयोग कर रहा हूँ सूची उल ली के लिए एक पृष्ठभूमि छवि है

#footer .module:nth-of-type(1)>.menu>li:nth-of-type(1){
  background-position: center;
  background-image: url(http://monagentvoyagessuperprix.j3.voyagesendirect.com/images/stories/images_monagentvoyagessuperprix/layout/icon-home.png);
  background-repeat: no-repeat;
}

<footer id="footer">
  <div class="module">
    <ul class="menu ">
      <li class="level1 item308 active current"></li>
      <li> </li>
    </ul> 
  </div>
  <div class="module">
    <ul class="menu "><li></li>
      <li></li> 
    </ul>
  </div>
  <div class="module">
    <ul class="menu ">
      <li></li>
      <li></li>
    </ul>
  </div>
</footer>

Answer 13

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

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

Answer 14

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

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

Comments

आपका उत्तर अनिवार्य रूप से इस प्रश्न के शीर्ष दो उच्चतम उत्तरों में पहले से ही निहित है और कुछ भी नहीं जोड़ता है। इसके अलावा, :first-childछद्म वर्ग का आपका उपयोग भ्रामक है क्योंकि इसे जोड़ने .class_nameसे पहले यह काम करने के तरीके को नहीं बदलता है और केवल इसे फिल्टर के रूप में कार्य करता है। यदि आपके पास पहले से एक डिव है <div class="class_name">First content that need to be styled</div>तो आपका चयनकर्ता मेल नहीं खाएगा क्योंकि यह वास्तविक पहला बच्चा नहीं है।

— j08691

मुझे नहीं लगता कि यह किसी के लिए सीधे आगे है जिसे जानकारी की आवश्यकता है। और हाँ आप मामले के बारे में सही हैं। यह एक अधिक विशिष्ट मामले में कार्य करता है। यही कारण है कि मुझे लगा कि यह उपयोगी हो सकता है।

— इवानोव

यह वही है जो मुझे चाहिए था, सटीक और संक्षिप्त। धन्यवाद @YavorIvanov

— क्वांटम

Answer 15

इस सरल और प्रभावी प्रयास करें

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

Answer 16

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

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

.home p:first-of-type

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

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

Answer 17

इस समाधान का प्रयास करें:

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

CodePen लिंक

Comments

सवाल यह है " वर्ग के साथ पहले तत्व के लिए सीएसएस चयनकर्ता ", " टैग नाम के साथ पहले तत्व के लिए सीएसएस चयनकर्ता " नहीं।

— GeroldBroser ने मोनिका को