क्या तत्वों के एक समूह में प्रत्येक चौथे तत्व का चयन करना, कहना संभव है?
Ex: मेरे पास 16 <div>तत्व हैं ... मैं ऐसा कुछ लिख सकता था।
div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)क्या ऐसा करने के लिए इससे अच्छा तरीका है?
जवाबों:
जैसा कि नाम का अर्थ है, आपको निरंतर संख्याओं के अलावा चर का उपयोग करके एक अंकगणितीय अभिव्यक्ति का निर्माण करने की अनुमति देता है । आप जोड़ ( ), घटाव ( ) और गुणांक गुणन ( जहां एक पूर्णांक है, जिसमें सकारात्मक संख्याएं, ऋणात्मक संख्याएं और शून्य शामिल हैं) कर सकते हैं।:nth-child()n+-ana
यहां बताया गया है कि आप उपरोक्त चयनकर्ता सूची कैसे लिखेंगे:
div:nth-child(4n)ये अंकगणित कैसे काम करते हैं, इस बारे में स्पष्टीकरण के लिए, इस प्रश्न के साथ-साथ कल्पना के बारे में मेरा उत्तर देखें ।
, ध्यान दें कि इस सवाल का जवाब यह मानता है कि कि एक ही माता पिता के तत्व के भीतर बच्चे सभी तत्वों का एक ही तत्व प्रकार के होते हैं div। यदि आपके पास विभिन्न प्रकार के कोई अन्य तत्व हैं जैसे कि h1या p, आपको केवल तत्वों को गिनने के लिए उपयोग :nth-of-type()करने की आवश्यकता होगी ::nth-child()div
<body>
<h1></h1>
<div>1</div> <div>2</div>
<div>3</div> <div>4</div>
<h2></h2>
<div>5</div> <div>6</div>
<div>7</div> <div>8</div>
<h2></h2>
<div>9</div> <div>10</div>
<div>11</div> <div>12</div>
<h2></h2>
<div>13</div> <div>14</div>
<div>15</div> <div>16</div>
</body>बाकी सब चीज़ों के लिए (कक्षाएं, विशेषताएँ, या इनमें से कोई भी संयोजन), जहाँ आप उस nth बच्चे की तलाश कर रहे हैं जो एक मनमाने चयनकर्ता से मेल खाता है, आप शुद्ध CSS चयनकर्ता के साथ ऐसा नहीं कर पाएंगे। मेरे इस सवाल का जवाब देखिए ।
वैसे, इस संबंध में 4n और 4n + 4 के बीच बहुत अंतर नहीं है :nth-child()। यदि आप nवैरिएबल का उपयोग करते हैं, तो यह 0. पर गिनना शुरू कर देता है। यह वह है जो प्रत्येक चयनकर्ता से मेल खाता है:
:nth-child(4n)
4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...:nth-child(4n+4)
4(0) + 4 = 0 + 4 = 4
4(1) + 4 = 4 + 4 = 8
4(2) + 4 = 8 + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...जैसा कि आप देख सकते हैं, दोनों चयनकर्ता ऊपर के समान तत्वों से मेल खाएंगे। इस मामले में, कोई अंतर नहीं है।
tr td:nth-child(4)। कोष्ठक के भीतर किसी भी n की कमी पर ध्यान दें
div:nth-child(4n+4) आपको nth-childछद्म वर्ग के लिए सही तर्क की आवश्यकता है ।
तर्क बी से शुरू an + bहोने वाले प्रत्येक वें बच्चे के मिलान के रूप में होना चाहिए ।
दोनों aऔर bवैकल्पिक पूर्णांक हैं और दोनों शून्य या नकारात्मक हो सकता है।
aशून्य है तो कोई है "हर एक वें बच्चे" खंड।aनेगेटिव है तो मैचिंग बैकवर्ड से शुरू की जाती है b।bशून्य या नकारात्मक है तो सकारात्मक bउदाहरण 4n+0का उपयोग करते हुए समतुल्य अभिव्यक्ति लिखना संभव है जैसा कि है 4n+4। वैसे 4n-1ही जैसा है 4n+3।उदाहरण:
li:nth-child(4n) {
background: yellow;
}<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>