क्या सीएसएस उन बच्चों की संख्या का पता लगा सकता है जिनके पास एक तत्व है?

Question

मैं शायद अपने ही सवाल का जवाब दे रहा हूं, लेकिन मैं बेहद उत्सुक हूं।

मुझे पता है कि सीएसएस एक माता-पिता के अलग-अलग बच्चों का चयन कर सकता है, लेकिन एक कंटेनर के बच्चों की शैली का समर्थन करने के लिए है, अगर उसके माता-पिता के पास निश्चित मात्रा में बच्चे हैं।

उदाहरण के लिए

container:children(8) {
  // style the parent this way if there are 8 children
}

मुझे पता है कि यह अजीब लगता है, लेकिन मेरे प्रबंधक ने मुझे इसकी जांच करने के लिए कहा, मुझे अपने आप कुछ भी नहीं मिला, इसलिए मैंने खोज को समाप्त करने से पहले एसओ करने का फैसला किया।

Comments

क्वांटिटी क्वेरी SCSS मिक्सिन

— Jakob E

Answer 1

स्पष्टीकरण:

मूल प्रश्न में एक पिछले phrasing के कारण, कुछ SO नागरिकों ने चिंता जताई है कि यह उत्तर भ्रामक हो सकता है। ध्यान दें कि, CSS3 में, शैलियों को उन बच्चों की संख्या के आधार पर मूल नोड पर लागू नहीं किया जा सकता है। हालाँकि, शैलियों को उन बच्चों के लिए लागू किया जा सकता है जो उनके भाई-बहनों की संख्या के आधार पर करते हैं।

---

मूल उत्तर:

अविश्वसनीय रूप से, यह अब CSS3 में विशुद्ध रूप से संभव है।

/* one item */
li:first-child:nth-last-child(1) {
/* -or- li:only-child { */
    width: 100%;
}

/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}

/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}

चाल पहले बच्चे का चयन करने के लिए है जब यह अंतिम-से-आखिरी बच्चा भी है। यह प्रभावी रूप से भाई-बहनों की संख्या के आधार पर चयन करता है।

इस तकनीक का श्रेय आंद्रे लुइस (खोजे गए) और ली वेरो (परिष्कृत) को जाता है।

क्या आप CSS3 से प्यार नहीं करते? 😄

कोड उदाहरण:

• https://codepen.io/mattlubner-the-decoder/pen/ExaQZQR

सूत्रों का कहना है:

• http://andr3.net/blog/post/142 (आंद्रे लुइस)
• http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ (ली वेरौ)

Comments

बेहद सुविधाजनक। मैंने एक SASS मिक्सिन

— SimpleJ

@IanSteffy मैंने अभी Chrome 45.0.2454.85 (64-बिट) पर यह परीक्षण किया है और यह ठीक काम करता है ...?

— मैथेमेटिक्स

अगर यह मेरे प्रोजेक्ट के साथ नहीं बल्कि कोडपेन में काम करता है तो यह निश्चित रूप से मेरी गलती है। मेरी गलती। यह उत्तर सही है! सही है, मैं कहता हूँ!

— इयान एस

यह जोड़ना अच्छा हो सकता है कि यह काम क्यों करता है, क्योंकि लोग कई छद्म चयनकर्ताओं के लिए उपयोग नहीं करते हैं (जैसे मैं अब तक था;)। यहाँ क्या हो रहा है कि यह उस बच्चे का चयन करता है जो एक ही समय में बच्चा x है / शुरू से और अंत से बच्चा y। और इसलिए यह केवल कुछ का चयन करता है अगर बिल्कुल x + y बच्चे हैं।

— लेगोलस

ध्यान दें कि :first-child:nth-last-child(1)आप के बजाय भी उपयोग कर सकते हैं :only-child।

— एडम रीस

Answer 2

नहीं, सच में नहीं। कुछ चयनकर्ता हैं जो आपको कुछ हद तक करीब ला सकते हैं, लेकिन संभवतः आपके उदाहरण में काम नहीं करेगा और सबसे अच्छा ब्राउज़र संगतता नहीं है।

:only-child

:only-childअर्थ में कुछ सच गिनती चयनकर्ताओं में से एक यह है कि यह जब वहाँ तत्व के पेरेंट से एक बच्चा है केवल लागू है। अपने आदर्शित उदाहरण का उपयोग करते हुए, यह children(1)संभवतः कार्य करता है ।

:nth-child

:nth-childआप जहाँ आप वास्तव में क्या करने के लिए देख रहे हैं, उसके आधार पर जाना चाहते हैं, चयनकर्ता वास्तव में आपको मिल सकता है। यदि आप सभी तत्वों को स्टाइल करना चाहते हैं यदि 8 बच्चे हैं, तो आप भाग्य से बाहर हैं। यदि, फिर भी, आप 8 वीं और बाद के तत्वों में शैलियों को लागू करना चाहते हैं, तो यह प्रयास करें:

p:nth-child( n + 8 ){
    /* add styles to make it pretty */
}

दुर्भाग्य से, ये संभवतः आपके द्वारा खोजे जा रहे समाधान नहीं हैं। अंत में, आपको संभवतः गिनती के आधार पर शैलियों को लागू करने के लिए कुछ जावास्क्रिप्ट विज़ार्ड का उपयोग करने की आवश्यकता होगी - भले ही आप इनमें से किसी एक का उपयोग करने के लिए थे, आपको शुद्ध के साथ जाने से पहले ब्राउज़र संगतता पर एक सख्त नज़र रखने की आवश्यकता होगी। सीएसएस समाधान।

W3 CSS3 छद्म वर्गों पर कल्पना

EDIT मैं आपके प्रश्न को थोड़ा अलग ढंग से पढ़ता हूं - माता-पिता को स्टाइल करने के लिए कुछ अन्य तरीके हैं , न कि बच्चों को। मुझे कुछ अन्य चयनकर्ताओं को अपने तरीके से फेंकने दें:

:empty तथा :not

यह ऐसी शैली के तत्व हैं जिनकी कोई संतान नहीं है। यह अपने आप में उपयोगी नहीं है, लेकिन जब :notचयनकर्ता के साथ जोड़ा जाता है , तो आप केवल उन तत्वों को स्टाइल कर सकते हैं जिनमें बच्चे हैं:

div:not(:empty) {
    /* We know it has stuff in it! */
}

आप यह नहीं गिन सकते कि कितने बच्चे यहां शुद्ध सीएसएस के साथ उपलब्ध हैं, लेकिन यह एक और दिलचस्प चयनकर्ता है जो आपको ठंडी चीजें करने देता है।

Comments

यह ध्यान देने योग्य है कि मूल प्रश्न को संपादित किया गया था, प्रारंभिक "नहीं" को थोड़ा सा भ्रामक (सिर्फ

— fyi 😛

Answer 3

नोट: यह समाधान कुछ लंबाई के सेट के बच्चों को वापस करेगा, न कि मूल तत्व के रूप में आपने पूछा है। उम्मीद है, यह अभी भी उपयोगी है।

आंद्रे लुइस एक विधि के साथ आए: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ दुर्भाग्य से, यह केवल IE9 और इसके बाद के संस्करण में काम करता है।

अनिवार्य रूप से, आप गठबंधन करते हैं: nth-child () अन्य छद्म वर्गों के साथ जो एक तत्व की स्थिति से निपटते हैं। यह दृष्टिकोण आपको विशिष्ट लंबाई वाले तत्वों के सेट से तत्वों को निर्दिष्ट करने की अनुमति देता है ।

उदाहरण के लिए :nth-child(1):nth-last-child(3)सेट में पहले तत्व से मेल खाता है जबकि सेट के अंत से तीसरा तत्व है। यह दो काम करता है: गारंटी देता है कि सेट में केवल तीन तत्व हैं और हमारे पास तीन में से पहला है। तीन तत्व सेट के दूसरे तत्व को निर्दिष्ट करने के लिए, हम उपयोग करेंगे :nth-child(2):nth-last-child(2)।

उदाहरण 1 - यदि तीन तत्वों में सेट हो तो सभी सूची तत्वों का चयन करें:

li:nth-child(1):nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):nth-last-child(1) {
    width: 33.3333%;
}

उदाहरण के लिए लियो वेरौ से 1 विकल्प :

li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

उदाहरण 2 - तीन सूची तत्वों के साथ सेट के अंतिम तत्व को लक्षित करें:

li:nth-child(3):last-child {
    /* I'm the last of three */
}

उदाहरण 2 विकल्प:

li:nth-child(3):nth-last-child(1) {
    /* I'm the last of three */
}

उदाहरण 3 - चार सूची तत्वों के साथ सेट के दूसरे तत्व को लक्षित करें:

li:nth-child(2):nth-last-child(3) {
    /* I'm the second of four */
}

Comments

फिर से, यह भाई-बहनों की संख्या है, न कि बच्चे

— टीएमएस

@TMS देखिए स्वीकार किए गए जवाब का संपादन - ओपी का सवाल

— अजीबोगरीब

यह दृष्टिकोण उस समय के लिए एकदम सही है जब प्रत्येक तत्व को सूची में अपनी स्थिति के आधार पर अलग-अलग ढंग से स्टाइल करने की आवश्यकता होती है, जैसे कि परिपत्र रूपांतर प्राप्त करने के लिए: li:nth-child(3):nth-last-child(1) { transform: rotate(120deg); } li:nth-child(2):nth-last-child(2) { transform: rotate(240deg); }और इसी तरह ...

— ग्रेग स्मिथ

Answer 4

मैट के समाधान से काम करते हुए, मैंने निम्नलिखित कम्पास / एससीएसएस कार्यान्वयन का उपयोग किया।

@for $i from 1 through 20 {
    li:first-child:nth-last-child( #{$i} ),
    li:first-child:nth-last-child( #{$i} ) ~ li {
      width: calc(100% / #{$i} - 10px);
    }
  }

यह आपको आइटम की संख्या का तेज़ी से विस्तार करने की अनुमति देता है।

Comments

इसके बजाय आप आसानी से फ्लेक्सबॉक्स का उपयोग कर सकते हैं…

— मिशाल मिस्ज़ेसिस्ज़िन

Answer 5

हाँ, हम ऐसा nth-child का उपयोग करके कर सकते हैं

div:nth-child(n + 8) {
    background: red;
}

इससे 8 वीं दिव्यांग बच्ची लाल हो जाएगी। उम्मीद है की यह मदद करेगा...

इसके अलावा, अगर कोई कभी कहता है "अरे, वे सीएसएस का उपयोग करके स्टाइल के साथ नहीं किया जा सकता है, तो जेएस का उपयोग करें !!!" तुरंत उन पर शक करो। आजकल सीएसएस बेहद लचीला है

उदाहरण :: http://jsfiddle.net/uWrLE/1/

उदाहरण में पहले 7 बच्चे नीले हैं, फिर 8 आगे लाल हैं ...

Comments

शायद समर्थन की दुर्भाग्यपूर्ण कमी के बारे में एक नोट जोड़ें ?

— बेनेश

मुझे नहीं लगता कि ब्रोडी यही पूछ रहे हैं - यह एक निश्चित राशि के बाद बच्चों को स्टाइल देगा , लेकिन अपने बच्चों की संख्या के आधार पर पूर्वज / युक्त तत्व का चयन नहीं कर सकता है।

— बेन हुल

यह वास्तव में कुछ बहुत अच्छी जानकारी है, हालांकि, धन्यवाद, लेकिन मधुमक्खी सही है, मैं यह कहना चाह रहा था "अगर एक तत्व के पास हमारे कई बच्चे हैं, तो यह शैली" अगर मैं गलत नहीं हूँ तो आपकी विधि 8 वें बच्चे की शैली होगी, लेकिन पहले 7 अकेला और नग्न होगा।

— ब्रॉडी

@primatology - केवल बच्चा जो nth-child का समर्थन नहीं करता है वह IE <9 है। अन्य सभी इसे दो संस्करणों का समर्थन करते रहे हैं।

— रोब

-1 यह दिव्यांग बच्चे को लाल नहीं बनाएगा , इससे दिव्यांग अपने भाई-बहनों के भीतर संख्या के आधार पर लाल हो जाएगा ! क्या किसी भी तरह से तलाक के बच्चे से संबंधित नहीं है!

— TMS

Answer 6

यदि आप इसे शुद्ध CSS (scss का उपयोग करके) करने जा रहे हैं, लेकिन आपके पास एक ही मूल वर्ग के अंदर विभिन्न तत्व / कक्षाएं हैं, तो आप इस संस्करण का उपयोग कर सकते हैं !!

  &:first-of-type:nth-last-of-type(1) {
    max-width: 100%;
  }

  @for $i from 2 through 10 {
    &:first-of-type:nth-last-of-type(#{$i}),
    &:first-of-type:nth-last-of-type(#{$i}) ~ & {
      max-width: (100% / #{$i});
    }
  }

Answer 7

नहीं, CSS में ऐसा कुछ नहीं है। हालाँकि, आप बच्चों की संख्या की गणना करने और शैलियों को लागू करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं।

Comments

@ लुबना क्या आप बता सकते हैं कि यह सच क्यों नहीं है?

— गेब्रियल सैंटोस