Nth Kind Selektor Css

Question

Ich habe ein Div-Muster hier, dieses Muster haben mindestens 9 Anzahl von und dieses Muster wiederholt sich. Die Hintergrundfarbe von div ist

gegeben

1 white 
    2 green 
    3 white 
    4 green 
    5 white 
    6 green 
    7 green 
    8 white 
    9 green 

so, um es i css

folgenden zu machen write

$(".test:nth-child(odd)").css("background-color","green"); 
    $(".test:nth-child(even)").css("background-color","green"); 
    $(".test:nth-child(7n)").css("background-color","green"); 
    $(".test:nth-child(8n)").css("background-color","white"); 
    $(".test:nth-child(9n)").css("background-color","green"); 

Jetzt ist alles Arbeit, aber das Problem ist, dass, wenn die Anzahl von divs kommt mehr als 9 dann die 10. div beginnt mit Hintergrundgrün, muss aber weiß sein.

zum Beispiel, wenn gibt es 18 div dann

1 white 
    2 green 
    3 white 
    4 green 
    5 white 
    6 green 
    7 green 
    8 white 
    9 green 
    10 white 
    11 green 
    12 white 
    13 green 
    14 white 
    15 green 
    16 green 
    17 white 
    18 green 

bitte gute Formel empfehlen, diese

Answer 1

Hallo ich diese Hoffnung zu lösen Hilfe u Verwendung dieses ist mit CSS

HTML:

<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 

css:

.test{ 
    height:100px; 
    width:100px; 
    margin:10px; 
    } 
    .test:nth-child(9n+1){background-color:white;} 
    .test:nth-child(9n+2){background-color:green;} 
    .test:nth-child(9n+3){background-color:white;} 
    .test:nth-child(9n+4){background-color:green;} 
    .test:nth-child(9n+5){background-color:white;} 
    .test:nth-child(9n+6){background-color:green;} 
    .test:nth-child(9n+7){background-color:green;} 
    .test:nth-child(9n+8){background-color:white;} 
    .test:nth-child(9n+9){background-color:green;} 

siehe jsfiddle https://jsfiddle.net/db0eedrL/2/

Answer 2

:nth-child Arbeiten ohne "n", dass es zu Nummer nächsten ist (in diesem Fall).

Answer 3

Korrigieren Sie mich, wenn ich falsch liege, aber ich glaube, Sie Muster nach 7 invers wollen (was weiß sein sollte, aber Sie wollen es grün)

.test { 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
    margin: 5px; 
 
    display: inline-block; 
 
} 
 

 
/* Every other child starting at 1 */ 
 
.test:nth-child(2n + 1) { 
 
    background-color: white; 
 
} 
 

 
/* Every other child starting at 2 */ 
 
.test:nth-child(2n + 2) { 
 
    background-color: green; 
 
} 
 

 
/* Every other child starting at 7 */ 
 
.test:nth-child(2n + 7) { 
 
    background-color: green; 
 
} 
 

 
/* Every other child starting at 8 */ 
 
.test:nth-child(2n + 8) { 
 
    background-color: white; 
 
} 
 

 
/* Every other child starting at 16 */ 
 
.test:nth-child(2n + 16) { 
 
    background-color: green; 
 
} 
 

 
/* Every other child starting at 17 */ 
 
.test:nth-child(2n + 17) { 
 
    background-color: white; 
 
}

<div class="test">1 white</div> 
 
<div class="test">2 green</div> 
 
<div class="test">3 white</div> 
 
<div class="test">4 green</div> 
 
<div class="test">5 white</div> 
 
<div class="test">6 green</div> 
 
<div class="test">7 green</div> 
 
<div class="test">8 white</div> 
 
<div class="test">9 green</div> 
 
<div class="test">10 white</div> 
 
<div class="test">11 green</div> 
 
<div class="test">12 white</div> 
 
<div class="test">13 green</div> 
 
<div class="test">14 white</div> 
 
<div class="test">15 green</div> 
 
<div class="test">16 green</div> 
 
<div class="test">17 white</div> 
 
<div class="test">18 green</div> 
 
<div class="test">19 white</div> 
 
<div class="test">20 green</div> 
 
<div class="test">21 white</div> 
 
<div class="test">22 green</div> 
 
<div class="test">23 white</div> 
 
<div class="test">24 green</div> 
 
<div class="test">25 white</div> 
 
<div class="test">26 green</div>

Ich habe kommentiert die Code, um es einfacher zu verstehen

ich CSS verwendet habe, aber Sie können dies mit JQuery gesetzt, wenn Sie möchten (wie Sie sich gerade befinden)

Hoffe, das hilft.