सीएसएस एनएच बच्चे तीसरे तत्व का चयन करने के लिए और फिर हर चौथाई?

Question

मैं तो हर 4.

तो यह चयन करेंगे 3 तत्व का चयन करने की कोशिश कर रहा हूँ, और 3, 7, 11, 15, 19, 23 ... आदि

.project:nth-child(3), .project:nth-child(7n+4) { 
    margin: 40px 0px 0px 0px; 
} 

क्या है वर्तमान कोड के साथ गलत है? यह काम नहीं कर रहा है, मार्जिन अभी भी दाएं मार्जिन पर 40px पर सेट है।

Answer 1

अंक

आपका पहला चयनकर्ता तीसरे तत्व का चयन किया जाता है:

.project:nth-child(7n+4)

:

.project:nth-child(3)

हालांकि, अपने दूसरे चयनकर्ता हर 7 वें तत्व 4 से शुरू चुन रही है,

समाधान

आप अतिरेक को खत्म करने और अपने दूसरे चयनकर्ता संशोधित करने के लिए अपने चयनकर्ताओं को जोड़ सकते हैं:

nth-child(4n+3)

ताकि अपने अंतिम सीएसएस पढ़ता है:

.project:nth-child(4n+3) { margin: 40px 0px 0px 0px; }

यह चयन करेंगे प्रत्येक चौथा तत्व (4 एन) तीसरे तत्व से शुरू होता है और तीसरे तत्व को भी चुनता है (+ 3)।

उदाहरण

यहाँ एक उदाहरण टुकड़ा है:

p:nth-child(4n+3) { 
 
    background:red; 
 
}

<p>1</p> 
 
<p>2</p> 
 
<p>3</p> 
 
<p>4</p> 
 
<p>5</p> 
 
<p>6</p> 
 
<p>7</p> 
 
<p>8</p> 
 
<p>9</p> 
 
<p>10</p> 
 
<p>11</p> 
 
<p>12</p> 
 
<p>13</p> 
 
<p>14</p> 
 
<p>15</p> 
 
<p>16</p> 
 
<p>17</p> 
 
<p>18</p> 
 
<p>19</p> 
 
<p>20</p> 
 
<p>21</p> 
 
<p>22</p> 
 
<p>23</p> 
 
<p>24</p> 
 
<p>25</p> 
 
<p>26</p> 
 
<p>27</p> 
 
<p>28</p> 
 
<p>29</p> 
 
<p>30</p> 
 
<p>31</p> 
 
<p>32</p> 
 
<p>33</p> 
 
<p>34</p> 
 
<p>35</p> 
 
<p>36</p> 
 
<p>37</p> 
 
<p>38</p> 
 
<p>39</p> 
 
<p>40</p>

Answer 2

.project:nth-child(4n+3) { 
 
    color: red; 
 
}

<ul> 
 
\t <li class="project">1</li> 
 
\t <li class="project">2</li> 
 
\t <li class="project">3</li> 
 
\t <li class="project">4</li> 
 
\t <li class="project">5</li> 
 
\t <li class="project">6</li> 
 
\t <li class="project">7</li> 
 
\t <li class="project">8</li> 
 
\t <li class="project">9</li> 
 
\t <li class="project">10</li> 
 
\t <li class="project">11</li> 
 
\t <li class="project">12</li> 
 
\t <li class="project">13</li> 
 
\t <li class="project">14</li> 
 
\t <li class="project">15</li> 
 
\t <li class="project">16</li> 
 
\t <li class="project">17</li> 
 
\t <li class="project">18</li> 
 
\t <li class="project">19</li> 
 
\t <li class="project">20</li> 
 
\t <li class="project">21</li> 
 
\t <li class="project">22</li> 
 
\t <li class="project">23</li> 
 
\t <li class="project">24</li> 
 
\t <li class="project">25</li> 
 
</ul>

Answer 3

बस वें वाले बच्चे (4n जोड़कर वें वाले बच्चे का उपयोग + 3) जो आप लेने के लिए अनुमति देता है: n वें वाले बच्चे (3) और इसके बाद के संस्करण (यदि यह सिर्फ n था), लेकिन जब से यह 4N है यह 3 तत्व लेने और उसके बाद हर 4.

.project:nth-child(4n+3) { 
     margin: 40px 0px 0px 0px; 
     background:red; 
    } 

वें वाले बच्चे (जिसका अर्थ 4n + 3)

4n = हर 4 तत्वों

= तत्व संख्या चुनें उठाओ 3

इसलिए यह मतलब संयुक्त तत्व 3 से शुरू होने वाले हर चार तत्वों को चुनें।

मैं आपको और अधिक विवरण के लिए इस लिंक की जाँच करने के लिए सुझाव: http://nthmaster.com/

डेमो:http://codepen.io/alexincarnati/pen/GgbXPw