same div with different colors

Question

same div with different colors

Asked 7 years, 11 months ago

Viewed 1,842 times

1

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

In two I can generate this effect:

divides them into class 1 (group of lighter colored Ivs), class 2 (group of darker colored Ivs) and to define their positions you put different ids and define the positions individually as well as understand

– Sarah

2016/07/29 at 13:49

3 answers

7

for the chess effect, you should do 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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Ricardo Mota • **2,905** points · Answer 1 · 2016-07-29T13:56:54+00:00

You can make use of the selectors Odd and Even css.
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>

by Sarah • **902** points · Answer 2 · 2016-07-29T14:08:59+00:00

Well 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>