same div with different colors

Navigation
1

How can I make a DIV change its color in the next instance of it?

TwointwoIcangeneratethiseffect:

    
asked by anonymous 29.07.2016 / 15:35

3 answers

6

For the chess effect, you should do it as follows: 

.container {
  width: 560px;
}

.container div {
  float: left;
  width: 50%;
  height: 40px;
}

.container div:nth-child(4n - 3), 
.container div:nth-child(4n) {
  background-color: gainsboro;
}

.container div:nth-child(4n - 2), 
.container div:nth-child(4n - 1) {
  background-color: silver;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
    
29.07.2016 / 16:05
4

You can make use of odd and even css. It would look like this: 

div{
    width: 150px;
    height: 150px;
    color: #fff;
    font-size: 25px;
    text-align: center;
    font-family: Arial;
    display: table-cell;
    vertical-align: middle;
  }
div:nth-child(odd) {
    background-color:#222222;
}
div:nth-child(even) {
    background-color:#292929;
}
    <div>DIV 01</div>
    <div>DIV 02</div>
    <div>DIV 03</div>
    <div>DIV 04</div>
    
29.07.2016 / 15:56
0

I hope this helps you: 

<!DOCTYPE html>
<html>
<head>
    <title>DIV SUA LINDA! ;)</title>
</head>

<style type="text/css">

.clara{
    background-color: #000000;
}

.escura{
    background-color: #696969;  
}

.div{
    width: 623px;
    height: 200px;
}

#box1{
    float: left;
}

#box2{
    float: right;
}

</style>

<body>

<div id="box1">
<div id="div1" class="clara div"></div>
<div id="div1" class="escura div"></div>
<div id="div1" class="clara div"></div>
</div>

<div id=box2>
<div id="div1" class="escura div"></div>
<div id="div1" class="clara div"></div>
<div id="div1" class="escura div"></div>
</div>

</body>
</html>
    
29.07.2016 / 16:08
If Logic Problem with GPS on Android Javascript - How to make input return to its normal state after validation