CSS nth Kind, um das 3. Element und dann jedes 4. auszuwählen?

Question

Ich versuche, das dritte Element auszuwählen, und dann So würde jeder 4.

es wählen 3, 7, 11, 15, 19, 23 ... usw.

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

Was ist falsch mit dem aktuellen Code? Es funktioniert nicht, der Rand ist immer noch auf 40 Pixel am rechten Rand eingestellt.

Answer 1

Ausgabe

Ihre erste Selektor das dritte Element ist die Auswahl:

.project:nth-child(3)

jedoch Ihre zweite Selektor beginnt jedes siebte Element Auswahl am 4.:

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

Lösung

Sie können Ihre Selektoren kombinieren Redundanz zu beseitigen und Ihren zweiten Selektor ändern zu:

nth-child(4n+3)

, so dass Ihre letzte CSS lautet:

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

Dies wird wählen Jedes vierte Element (4n) beginnt bei dem dritten Element und wählt auch das dritte Element selbst aus (+ 3).

Beispiel

Hier ist ein Beispiel-Schnipsel:

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

Verwenden Sie einfach n-te-Kind durch Zugabe n-Kind (4n + 3), die Sie wählen kann: n-Kind (3) und höher (wenn es nur n ist), aber es bedeutet, wählen Sie das dritte Element, da es 4n und dann jedes 4.

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

n-te-Kind (4n + 3)

4N = Wähle alle 4 Elemente

= Auswahl-Elementnummer 3

Daher kombiniert es bedeuten s Wählen Sie alle vier Elemente ausgehend von Element 3 aus.

Ich schlage vor, Sie auf diesen Link, um zu überprüfen, um weitere Erklärung aus: http://nthmaster.com/

DEMO:http://codepen.io/alexincarnati/pen/GgbXPw