river rhun river rhun - 3 months ago 13
CSS Question

CSS nth-child to create sequence odd even

i know there is so many question about this, but i think this is a new question about nth child. i tried to build multiple profile page with an order


  1. odd goes left even goes right

  2. odd n1 = background1(1) even n1 = backround2(1)

  3. odd n2 = background1(2) even n2 = backround2(2)

  4. odd n3 = background1(3) even n3 = backround2(3)

  5. it simply cyan magenta yellow and always repeat. b1cyan left, b2magenta right, b1yellow left, b2cyan right, b1magenta left, b2yellow right and so on.





.wrapper{
width:50%;
position:relative;
margin:0 auto;}

.items{
width:100%;}

.items:nth-child(odd){
text-align:left;}
.items:nth-child(even){
text-align:right;}

.items:nth-child(odd):not(:nth-child(3n+1)){
background:cyan;
background-size:100% 100%;
}
.items:nth-child(even):not(:nth-child(3n+1)){
background:magenta;
background-size:100% 100%;
}.items:nth-child(odd):not(:nth-child(3n+2)){
background:yellow;
background-size:100% 100%;
}
.items:nth-child(even):not(:nth-child(3n+2)){
background:cyan;
background-size:100% 100%;
}
.items:nth-child(odd):not(:nth-child(3n+3)){
background:magenta;
background-size:100% 100%;
}
.items:nth-child(even):not(:nth-child(3n+3)){
background:yellow;
background-size:100% 100%;
}

<div class="wrapper">
<div class="items">a</div>
<div class="items">b</div>
<div class="items">c</div>
<div class="items">d</div>
<div class="items">e</div>
<div class="items">f</div>
<div class="items">g</div>
<div class="items">h</div>
<div class="items">i</div>
<div>





it appears that
.items:nth-child(odd):not(:nth-child(3n+1))
means

an odd number in order (3x0)+1 items should be doing this and so on but. it didn't work as i thot.

please help

Answer

I believe this is what you desire.

.wrapper{
    width:50%;
    position:relative;
    margin:0 auto;}

    .items{
    width:100%;}

    .items:nth-child(odd){
    text-align:left;}
    .items:nth-child(even){
    text-align:right;}

    .items:nth-child(odd):nth-child(3n+1) {
      background: cyan;
    }
    .items:nth-child(even):nth-child(3n+2) {
      background: magenta;
    }
    .items:nth-child(odd):nth-child(3n+3) {
      background: yellow;
    }

    .items:nth-child(even):nth-child(3n+4) {
      background: cyan;
    }
    .items:nth-child(odd):nth-child(3n+5) {
      background: magenta;
    }
    .items:nth-child(even):nth-child(3n+6) {
      background: yellow;
    }
<div class="wrapper">
        <div class="items">a</div>
        <div class="items">b</div>
        <div class="items">c</div>
        <div class="items">d</div>
        <div class="items">e</div>
        <div class="items">f</div>
        <div class="items">g</div>
        <div class="items">h</div>
        <div class="items">i</div>
        <div>