CSS Nth-Child Apply Odd-Even Rule But Switch Every 4 Items

CSS nth-child apply odd-even rule but switch every 4 items

Demo

http://jsfiddle.net/mykhA/1/

HTML

<div class="container">
    <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
    <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
    <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
    <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
</div>​

CSS

.container {
    width: 100px;
    height: 100px;
}

.line {
    width: 100px;
    height: 25px;
}

.box {
    width: 25px;
    height: 25px;
    float: left;
}

.box:nth-child(8n+2) {
    background-color: red;
}

.box:nth-child(8n+4) {
    background-color: red;
}
.box:nth-child(8n+5) {
    background-color: red;
}

.box:nth-child(8n+7) {
    background-color: red;
}

.box:nth-child(8n+1) {
    background-color: blue;
}

.box:nth-child(8n+3) {
    background-color: blue;
}

.box:nth-child(8n+6) {
    background-color: blue;
}

.box:nth-child(8n) {
    background-color: blue;
}
​

​

Reverse the even-odd pattern after every nth-child item

Is it possible to change Even and Odd TO Odd to Even after every forth item?

If you mean that for the first 4 elements the odd elements should have red background while the even ones should have green background and it gets swapped for every set of 4 elements then you can do it using nth-child selectors like in the below snippet. It can be done using nth-of-type also.

ul{

  padding:0;

  width:100%;

}

li{

  width:25%;

  height:50px;

  float:left;

  border:1px solid black;

  list-style:none;

  box-sizing: border-box;

}

li:nth-child(8n+1),li:nth-child(8n+3), li:nth-child(8n+6), li:nth-child(8n){

  background: red;

}

li:nth-child(8n+2),li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7){

  background: green;

}

<ul>

<li>bg color RED</li>

<li>bg color Green</li>

<li>bg color RED</li>

<li>bg color Green</li>

<li>bg color Green</li>

<li>bg color RED</li>

<li>bg color Green</li>

<li>bg color RED</li>

<li>bg color RED</li>

<li>bg color Green</li>

<li>bg color RED</li>

<li>bg color Green</li>

</ul>

nth child even/odd selector

Change the last rule to:

#commercialNav li:nth-child(odd) a{
    color:#215034;
}

jsFiddle example

The anchors aren't children of the #commercialNav div (although they are descendants), so that particular selector you were trying won't work. If you didn't have the list items in there then the rule would work, but since the anchors aren't sibling of each other, you need to use the selectors as I show above.

Can you use nth-child to select the last 3 items and choose odd or even?

You need to repeat the :nth-child portion as well:

li:nth-last-child(-n + 3):nth-child(even) {
    background: #0000ff;
}

li:nth-last-child(-n + 3):nth-child(odd) {
    background: #ffff00;
}

Also, depending on how many elements you have, :nth-child(odd) and :nth-last-child(odd) (as well as their even counterparts) may select different elements.

Select odd even child excluding the hidden child

Pseudo-selectors don't stack, so your :not doesn't affect the :nth-child (nor would it affect :nth-of-type etc.

If you can resort to jQuery, you can use the :visible pseudo-selector there, although that's not a part of the CSS spec.

If you're generating the HTML and can change that, you can apply odd/even with logic at run-time, eg in PHP:

foreach ($divs AS $i => $div) {
    echo '<div class="box ' . ($i % 2 ? 'even' : 'odd') . '">x</div>';
}

Even trying to do something tricky like

.box[class='box']:nth-of-type(even)

doesn't work, because the psuedo-selector doesn't even stack onto the attribute selector.

I'm not sure there's any way to do this purely with CSS - I can't think of any right now.

CSS3 :nth-child(odd) /even isn't consistent

  <li></li>                // odd , display none   
  <li class="active"></li> // even                 green
  <li></li>                // odd , display none
  <li class="active"></li> // even                 green
  <li class="active"></li> // odd                  yellow
  <li></li>                // even, display none
  <li class="active"></li> // odd                  yellow
  <li class="active"></li> // even                 green
  <li></li>                // odd , display none
  <li class="active"></li> // even                 green

what doesn't make sense? What're your empty <li>s for? Considering doing something different there... if they're for spacing, add a "spacer" class to some LIs and put margin/padding on it.

---

Assuming you want the row-colors to change dynamically depending on what's visible, you can't do this with pure CSS. It's simple using jQuery though, something like:

$( '#ul li:visible' ).each( function( i ){
    $( this )[ (1&i) ? 'addClass' : 'removeClass' ]( 'active' );
} )

CSS even odd for every other odd div in class

:nth-child(4n) gives us 0, 4, 8, etc.

Since you want 1, 5, 9, you should try :nth-child(4n + 1)

---

Related Topics