css - सीएसएस में हर एनएच तत्व का चयन करें




2 Answers

जैसा कि नाम का तात्पर्य है : n th-child() आपको निरंतर संख्याओं के अतिरिक्त n चर का उपयोग करके अंकगणितीय अभिव्यक्ति बनाने की अनुमति देता है। आप अतिरिक्त ( + ), घटाव ( - ) और गुणांक गुणा (जहां a पूर्णांक है, सकारात्मक संख्याओं, नकारात्मक संख्याओं और शून्य सहित) कर सकते हैं।

यहां बताया गया है कि आप उपरोक्त चयनकर्ता सूची को फिर से लिखेंगे:

div:nth-child(4n)

इन अंकगणितीय अभिव्यक्तियों के काम के बारे में एक स्पष्टीकरण के लिए, इस प्रश्न के साथ-साथ spec मेरा जवाब देखें।

ध्यान दें कि यह उत्तर मानता है कि एक ही मूल तत्व के सभी बच्चे तत्व समान तत्व प्रकार, div । यदि आपके पास h1 या p जैसे विभिन्न प्रकार के अन्य तत्व हैं, तो आपको यह सुनिश्चित करने की आवश्यकता होगी :nth-child() :nth-of-type() :nth-child() बजाय यह सुनिश्चित करने के लिए कि आप केवल div तत्वों को 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-child() संबंध में 4 एन और 4 एन + 4 के बीच कोई अंतर नहीं है। यदि आप 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
...

जैसा कि आप देख सकते हैं, दोनों चयनकर्ता उपरोक्त के समान तत्वों से मेल खाते हैं। इस मामले में, कोई फर्क नहीं पड़ता है।

तत्वों के एक सेट में हर चौथा तत्व चुनना संभव है?

पूर्व: मेरे पास 16 <div> तत्व हैं ... मैं कुछ लिख सकता हूं।

div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)

क्या ऐसा करने के लिए इससे अच्छा तरीका है?




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

div:nth-child(4n+4)



Related