क्या मैं एक मनमाने चयनकर्ता के साथ nth-child () या: nth-of-type () जोड़ सकता हूँ?

Question

क्या प्रत्येक nth बच्चे को चुनने का एक तरीका है जो एक मध्यस्थ चयनकर्ता से मेल खाता है (या मेल नहीं खाता) ? उदाहरण के लिए, मैं हर विषम तालिका पंक्ति का चयन करना चाहता हूं, लेकिन पंक्तियों के सबसेट के भीतर:

table.myClass tr.row:nth-child(odd) {
  ...
}

<table class="myClass">
  <tr>
    <td>Row
  <tr class="row"> <!-- I want this -->
    <td>Row
  <tr class="row">
    <td>Row
  <tr class="row"> <!-- And this -->
    <td>Row
</table>

लेकिन :nth-child()बस सभी गिनती करने लगता है trतो मैं एक के साथ खत्म हो, या नहीं, वे "पंक्ति" वर्ग के हैं की परवाह किए बिना तत्वों भी "पंक्ति" तत्व के बजाय दो मैं तलाश कर रहा हूँ। एक ही बात के साथ होता है :nth-of-type()।

कोई समझा सकता है क्यों?

Answer 1

यह एक बहुत ही आम समस्या है जो कैसे :nth-child()और :nth-of-type()काम की गलतफहमी के कारण उत्पन्न होती है । दुर्भाग्य से, वर्तमान में कोई चयनकर्ता-आधारित समाधान नहीं है क्योंकि चयनकर्ता एनटीटी बच्चे से मेल खाने का एक तरीका प्रदान नहीं करते हैं जो एक मनमाने ढंग से चयनकर्ता से मेल खाता है जैसे कि विषम-संख्या वाले, समान-संख्या वाले या an+bजहां a != 1और जहां b != 0। यह चयनकर्ताओं, नकारों, और सरल चयनकर्ताओं के अधिक जटिल संयोजनों को विशेषता देने के लिए, सिर्फ कक्षा चयनकर्ताओं से आगे निकलता है।

:nth-child()छद्म वर्ग के बीच तत्वों में गिना जाता है सब एक ही मूल के तहत अपने भाई-बहनों में। यह केवल उन भाई-बहनों की गिनती नहीं है जो बाकी चयनकर्ता से मेल खाते हैं। इसी तरह, :nth-of-type()छद्म वर्ग समान तत्व प्रकार साझा करने वाले भाई - बहनों को गिनता है, जो HTML में टैग नाम को संदर्भित करता है, और बाकी चयनकर्ता को नहीं।

इसका अर्थ यह भी है कि यदि एक ही माता-पिता के सभी बच्चे एक ही तत्व प्रकार के हैं, उदाहरण के लिए एक टेबल बॉडी के मामले में जिनके केवल बच्चे trतत्व हैं या एक सूची तत्व जिनके एकमात्र बच्चे liतत्व हैं, तो :nth-child()और पहचान :nth-of-type()का व्यवहार करेंगे, अर्थात के हर मूल्य के लिए an+b, :nth-child(an+b)और :nth-of-type(an+b)तत्वों के एक ही सेट से मेल खाएगा।

वास्तव में, किसी दिए गए मिश्रित चयनकर्ता में सभी सरल चयनकर्ता, जैसे कि छद्म वर्ग जैसे :nth-child()और :not(), एक-दूसरे से स्वतंत्र रूप से काम करते हैं , बजाए कि उन तत्वों के सबसेट को देखते हुए जो बाकी चयनकर्ता द्वारा मेल खाते हैं।

इसका अर्थ यह भी है कि प्रत्येक व्यक्ति यौगिक चयनकर्ता ^{1 के} भीतर सरल चयनकर्ताओं के बीच आदेश की कोई धारणा नहीं है , उदाहरण के लिए निम्नलिखित दो चयनकर्ता समकक्ष हैं:

table.myClass tr.row:nth-child(odd)
table.myClass tr:nth-child(odd).row

अंग्रेजी में अनुवादित, वे दोनों का मतलब है:

trनिम्नलिखित स्वतंत्र स्थितियों में से मेल खाने वाले किसी भी तत्व का चयन करें :

• यह अपने माता-पिता की एक विषम संख्या वाला बच्चा है;
• इसमें कक्षा "पंक्ति" है; तथा
• यह एक tableतत्व का वंशज है जिसका वर्ग "मायक्लास" है।

^{(आप यहाँ एक अव्यवस्थित सूची के मेरे उपयोग पर ध्यान देंगे, बस बिंदु घर चलाने के लिए)}

क्योंकि वर्तमान में कोई शुद्ध सीएसएस समाधान नहीं है, इसलिए आपको तत्वों को फ़िल्टर करने और तदनुसार शैलियों या अतिरिक्त वर्ग नामों को लागू करने के लिए एक स्क्रिप्ट का उपयोग करना होगा। उदाहरण के लिए, jQuery का उपयोग करते हुए निम्नलिखित एक आम समाधान है (यह मानते हुए trकि तालिका के भीतर तत्वों के साथ आबादी वाला केवल एक पंक्ति समूह है ):

$('table.myClass').each(function() {
  // Note that, confusingly, jQuery's filter pseudos are 0-indexed
  // while CSS :nth-child() is 1-indexed
  $('tr.row:even').addClass('odd');
});

इसी सीएसएस के साथ:

table.myClass tr.row.odd {
  ...
}

यदि आप स्वचालित परीक्षण उपकरण जैसे सेलेनियम या प्रसंस्करण HTML का उपयोग lxml जैसे उपकरणों के साथ कर रहे हैं, तो इनमें से कई उपकरण XPath को विकल्प के रूप में अनुमति देते हैं:

//table[contains(concat(' ', @class, ' '), ' myClass ')]//tr[contains(concat(' ', @class, ' '), ' row ')][position() mod 2)=1]

विभिन्न तकनीकों का उपयोग करने वाले अन्य समाधान पाठक के लिए एक अभ्यास के रूप में छोड़ दिए जाते हैं; यह सिर्फ एक संक्षिप्त, उदाहरण के लिए दृष्टांत है।

---

जो इसके लायक है, उसके लिए दिए गए चयनकर्ता से मेल खाने वाले प्रत्येक nth बच्चे के चयन के विशिष्ट उद्देश्य के लिए चयनकर्ताओं के स्तर 4 में जोड़े जाने वाले अंकन के विस्तार के:nth-child() लिए एक प्रस्ताव है । ²

चयनकर्ता जिसके द्वारा मैचों को फ़िल्टर करने के लिए एक तर्क के रूप में प्रदान किया जाता है :nth-child(), फिर से कैसे चयनकर्ता एक क्रम में एक दूसरे से स्वतंत्र रूप से संचालित होते हैं जैसा कि मौजूदा चयनकर्ता सिंटैक्स द्वारा निर्देशित किया जाता है। तो आपके मामले में, यह इस तरह दिखेगा:

table.myClass tr:nth-child(odd of .row)

(एक अचूक पाठक इस बात पर ध्यान देगा कि यह :nth-child(odd of tr.row)सरल चयनकर्ताओं के बजाय होना चाहिए , trऔर :nth-child()स्वतंत्र रूप से एक दूसरे के रूप में अच्छी तरह से काम करेगा। यह कार्यात्मक छद्म वर्गों के साथ समस्याओं में से एक है जो चयनकर्ताओं को स्वीकार करते हैं, कीड़े का एक कर सकते हैं। इस उत्तर के बीच में नहीं खुला। इसके बजाय मैं इस धारणा के साथ जाने वाला हूं कि अधिकांश साइटों में तत्वों के अलावा अन्य तत्व नहीं होंगे जैसे कि trटेबल बॉडी में एक दूसरे के भाई-बहन होते हैं, जो या तो विकल्प को कार्यात्मक रूप से समकक्ष बना देगा। '

बेशक, एक ब्रांड के नए विनिर्देश में एक नया प्रस्ताव होने के नाते, यह शायद सड़क पर कुछ वर्षों तक कार्यान्वयन को नहीं देखेगा। इस बीच, आपको ऊपर के रूप में एक स्क्रिप्ट का उपयोग करने के साथ रहना होगा।

---

¹ _{यदि आप एक प्रकार या सार्वभौमिक चयनकर्ता निर्दिष्ट करते हैं, तो इसे पहले आना चाहिए। यह नहीं बदलता है कि चयनकर्ता मूल रूप से कैसे काम करते हैं; यह एक सिंटैक्टिक क्विक से ज्यादा कुछ नहीं है।}

² _{यह मूल रूप से प्रस्तावित किया गया था :nth-match(), हालांकि, क्योंकि यह अभी भी केवल अपने भाई-बहनों के सापेक्ष एक तत्व को गिनता है, और किसी अन्य तत्व को जो दिए गए चयनकर्ता से मेल नहीं खाता है, यह 2014 के बाद से मौजूदा के :nth-child()बजाय एक विस्तार के रूप में पुनर्निर्मित किया गया है ।}

Comments

"(आप यहां एक अनियंत्रित सूची के मेरे उपयोग को नोटिस करेंगे, बस बिंदु घर को चलाने के लिए)" मैं चाहता हूं कि अधिक लोग थे जो ऑर्डर किए गए बनाम अनियंत्रित गोलियों के उनके उपयोग के बारे में जानबूझकर थे। आपके उत्तर के लिए धन्यवाद।

— लाल मटर

@ द रेड पीआ: मेरे सबसे बड़े HTML पालतू जानवरों में से एक: "उच्चतम / निम्नतम से निम्नतम / उच्चतम:" के बाद एक अनियंत्रित सूची। मेरा मतलब है, गंभीरता से?

— BoltClock

Answer 2

ज़रुरी नहीं..

डॉक्स से बोली

:nth-childछद्म वर्ग एक तत्व एक + b -1 है कि मेल खाता दस्तावेज़ पेड़ में यह पहले भाई-बहन , किसी दिए गए सकारात्मक या n के लिए शून्य मूल्य के लिए, और एक माता पिता के तत्व है।

यह स्वयं का चयनकर्ता है और कक्षाओं के साथ संयोजन नहीं करता है। आपके नियम में इसे एक ही समय में दोनों चयनकर्ता को संतुष्ट करना है, इसलिए यह :nth-child(even)तालिका पंक्तियों को दिखाएगा यदि वे भी .rowकक्षा में होते हैं।

Answer 3

nth-of-typeएक ही प्रकार के तत्व के nth-childसूचकांक के अनुसार काम करता है, लेकिन केवल सूचकांक के अनुसार काम करता है, चाहे किसी भी प्रकार के भाई-बहन तत्व हों।

उदाहरण के लिए

<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>

मान लीजिए ऊपर HTML में हम बाकी वर्ग वाले सभी तत्वों को छिपाना चाहते हैं।

इस मामले में nth-childऔर nth-of-typeठीक उसी तरह काम करेगा जैसे सभी तत्व एक ही प्रकार के होते हैं <div>इसलिए सीएसएस होना चाहिए

.rest:nth-child(6), .rest:nth-child(7), .rest:nth-child(8), .rest:nth-child(9), .rest:nth-child(10){
    display:none;
}

या

.rest:nth-of-type(6), .rest:nth-of-type(7), .rest:nth-of-type(8), .rest:nth-of-type(9), .rest:nth-of-type(10){
    display:none;
}

अब आप सोच रहे होंगे क्या बीच का अंतर है nth-childऔर nth-of-typeयह इतना फर्क है

मान लीजिए html है

<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>

उपरोक्त HTML में .restतत्व का प्रकार दूसरों से भिन्न है .restऔर पैराग्राफ अन्य हैं, इसलिए इस मामले में div हैं यदि आप उपयोग करते nth-childहैं तो आपको इस तरह लिखना होगा

.rest:nth-child(6), .rest:nth-child(7), .rest:nth-child(8), .rest:nth-child(9), .rest:nth-child(10){
    display:none;
}

लेकिन अगर आप nth-of-type css का उपयोग करते हैं तो यह हो सकता है

.rest:nth-of-type(1), .rest:nth-of-type(2), .rest:nth-of-type(3), .rest:nth-of-type(4), .rest:nth-of-type(5){
    display:none;
}

जैसा कि .restतत्व का प्रकार <p>यहां nth-of-typeहै, के प्रकार का पता लगा रहा है .restऔर फिर उसने 1, 2, 3, 4 वें, 5 वें तत्व पर सीएसएस लागू किया <p>।

Comments

<tr>टैग के लिए यह कितना उपयोगी है ?

— एलेक्सिस विल्के

Answer 4

आप xpath के साथ ऐसा करने में सक्षम हो सकते हैं। ऐसा कुछ //tr[contains(@class, 'row') and position() mod 2 = 0]काम कर सकता है। विवरणों पर विस्तार करने के लिए अन्य SO प्रश्न हैं जो कक्षाओं को अधिक सटीक रूप से कैसे मेल खाते हैं।

Answer 5

यहाँ आपका जवाब है

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TEST</title>

  <style>

    .block {
      background: #fc0;
      margin-bottom: 10px;
      padding: 10px;
    }
    /* .large > .large-item:nth-of-type(n+5) {
      background: #f00;
    } */

    .large-item ~ .large-item ~ .large-item ~ .large-item ~ .large-item {
      background: #f00;
    }

  </style>
</head>
<body>

<h1>Should be the 6th Hello Block that start red</h1>
<div class="small large">
  <div class="block small-item">Hello block 1</div>
  <div class="block small-item large-item">Hello block 2</div>
  <div class="block small-item large-item">Hello block 3</div>
  <div class="block small-item large-item">Hello block 4</div>
  <div class="block small-item large-item">Hello block 5</div>
  <div class="block small-item large-item">Hello block 6</div>
  <div class="block small-item large-item">Hello block 7</div>
  <div class="block small-item large-item">Hello block 8</div>
</div>

</body>
</html>

Answer 6

Nth-child का उपयोग करने और छिपे हुए टैगों को छोड़ने के बारे में सभी प्रश्न इस एक के दोहराव के रूप में पुनर्निर्देशित होते प्रतीत होते हैं इसलिए मैं यहां से चला जाऊंगा। मैं इस ब्लॉग https://blog.blackbam.at/2015/04/09/css-nth-child-selector-ignore-hidden-element/ पर आया था जो nth-child तत्वों को अनदेखा करने के लिए एक चतुर css दृष्टिकोण का उपयोग करता है निम्नलिखित नुसार:

निम्नलिखित सीएसएस हर दूसरे दिखाई देने वाले तत्व के लिए एक मार्जिन सही जोड़ता है चाहे कोई भी तत्व हो जिसमें cpw क्लास हो।

.cpw {
    display:none;
}

.video_prewrap {
    margin-right:20px;
}

.video_prewrap:nth-child(2n) {
    margin-right:0;
}

.cpw ~ .video_prewrap:nth-child(2n) {
    margin-right:20px;
}

.cpw ~ .video_prewrap:nth-child(2n-1) {
    margin-right:0;
}

आशा है कि किसी ऐसे व्यक्ति की मदद करता है जो छिपे हुए तत्वों के सवालों की अनदेखी के लिए डूप ट्रेल का अनुसरण कर रहा है!

Comments

मैं इसे उभारना चाहता हूं, लेकिन इसके लिए काम करने वाले डेमो की जरूरत है।

— Moob

मेरा स्मरण है कि यह वास्तव में उतना मजबूत नहीं था जितना कि यह शुरू में लग रहा था - मैं अब शीर्ष मतदान टिप्पणी के साथ जाऊंगा, यह संभव नहीं है।

— आयरिशड्यूग्यूई

Answer 7

यदि आपके पास सभी चयनकर्ता के लिए एक ही मूल वर्ग है, तो आप उस वर्ग का उपयोग करते हैं document.querySelector("main .box-value:nth-child(3) select.priorityOption"); क्योंकि उस मामले में document.querySelector("main .box-value select.priorityOption:nth-child(3)");काम नहीं कर रहा है। धन्यवाद

<div class="card table">
    <div class="box">
        <div class="box-value">
            <select class="priorityOption">
                <option value="">--</option>
                <option value="">LOREM</option>
                <option value="">LOREM</option>
            </select>
        </div>

        <div class="box-value">
            <select class="priorityOption">
                <option value="">--</option>
                <option value="">LOREM</option>
                <option value="">LOREM</option>
            </select>
        </div>

        <div class="box-value">
            <select class="priorityOption">
                <option value="">--</option>
                <option value="">LOREM</option>
                <option value="">LOREM</option>
            </select>
        </div>
    </div>
</div>