CSS Div Alternating Colour

CSS div alternating colour

Don't use nth-child, use nth-of-type

div.container > div:nth-of-type(odd) {
    background: #e0e0e0;
}

.container {  width: 600px;  margin: 0 auto;}
.row {  line-height: 24pt;  border: solid 1px black;}
div.container>div:nth-of-type(odd) {  background: #e0e0e0;}
h3 {  line-height: 36pt;  font-weight: bold;  color: blue;}

<div class="container">  <h3>Title</h3>  <div class="row">Content</div>  <div class="row">Content</div>  <div class="row">Content</div>  <div class="row">Content</div>  <h3>Title</h3>  <div class="row">Content</div>  <div class="row">Content</div>  <h3>Title</h3>  <div class="row">Content</div>  <div class="row">Content</div>  <div class="row">Content</div>  <div class="row">Content</div>  <div class="row">Content</div>  <h3>Title</h3>  <div class="row">Content</div>  <div class="row">Content</div>  <div class="row">Content</div>  <div class="row">Content</div></div>

Alternate table row color using CSS?

$(document).ready(function()
{
  $("tr:odd").css({
    "background-color":"#000",
    "color":"#fff"});
});

tbody td{
  padding: 30px;
}

tbody tr:nth-child(odd){
  background-color: #4C8BF5;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>

How to alternate background colour on DIV rows? (Jquery and/or CSS)

If I understood correctly what you want,then you want to target your div's not divs inside them :

div.G:nth-child(even) {background: #CCC;}
div.G:nth-child(odd) { background: #FFF;}

It's always preferable to use css over js, because it's hardware accelarated.

Fiddle http://jsfiddle.net/qgb9s8cq/5/

alternate colour rows in dynamically generated divs

Here is a demonstration using divs. There doesn't need to be a class on each "cell", just on the containing div that represents a row.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Some Title</title>
<style type="text/css">
.table {
    width: 300px;
}
.table span {
    display: inline-block;
    width: 30%;
    border: 1px solid white;
}
.row:nth-child(odd) {
    background-color: blue;
}
.row:nth-child(even) {
    background-color: green;
}
</style>
</head>
<body>
<div class="table">
    <div class="row">
        <span>stuff</span>
        <span>stuff</span>
        <span>stuff</span>
    </div>
    <div class="row">
        <span>stuff</span>
        <span>stuff</span>
        <span>stuff</span>
    </div>
    <div class="row">
        <span>stuff</span>
        <span>stuff</span>
        <span>stuff</span>
    </div>
    <div class="row">
        <span>stuff</span>
        <span>stuff</span>
        <span>stuff</span>
    </div>
</div>
</body>
</html>

alternating divs

Alternating Background colors on divs

As the error in console says, you missed a ; in your for-loop. Add it, and it works.

Note I also simplified your isEven() function. As @Nathan mentioned, you can also make it even simpler by removing this function, and testing it directly on the if statment.

function isEven(value) {    return (value % 2 == 0);}
function setColors() {    var userList = document.getElementsByClassName("testclass");    var i;    for (i = 0; i < userList.length; i++) { // <-- /!\ Here /!\      if (isEven(i)) {        userList[i].style["background-color"] = "red";      } else {        userList[i].style["background-color"] = "blue";      }    }}window.onload = setColors;

.testclass {  width: 100%;  height: 10px;  background-color: #fdc345;}

<div class="testclass"></div><div class="testclass"></div><div class="testclass"></div><div class="testclass"></div>

Using DIVs for table: how to alternate row colors with two or more columns

I guess this is just what you are looking for.

To make things simpler, I have taken all the 'rows' and placed it inside a container div called 'rows'. I have also applied background colors as you wanted as well as keeping alternate colors. I have added margin and padding to make the colors obvious (i kow it doenst look good but its done for illustration purpose).

These are the 2 CSS classes I used:

.detail {
    background-color: Gray;
    color: Blue;
    height:20px;
    width:100%;
    padding:25px 0;
}
.rows > div:nth-child(4n) {
    background-color:Orange;
    color: red;
}

And I modified (just added a container called row as previously stated) the HTML as such:

<div class="rows">
            <div class="clear"></div>
            <div class="detail">
                <div class="col-1">1</div>
                <div class="col-2">John Doe</div>
                <div class="col-3">jd@johndoe.com</div>
                <div class="col-4">Delete</div>
                <div class="col-5">Edit</div>
            </div>
..Other 'detail' classes
</div>

You can take a look here: http://jsfiddle.net/8bLUH/1/

The idea is that I have given you the 2 alternate classes named 'detail' (odd row) and rows . div:nth-child(4n) (even row). You can apply whatever styling you want on them.

Hope this helps!!!

Alternating row color div

With your current markup this is what you need:

.row{
    min-width: 450px;
    background-color: #eaeaea;
    border-top: 1px solid;
}

.row:nth-child(even){
     background-color: #B0C4DE;
}

FIDDLE

CSS Div Alternating Colour