Como posso fazer para que uma DIV mude sua cor na próxima instância da mesma?
3 Respostas
para o efeito xadrez, você deve fazer da seguinte forma.:
.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>
Você pode fazer usar os seletores odd e even css.
Ficaria assim:
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>
-
1Ricardo isso não resulta para fazer o que o AP quer. odd = impar, even = par... Divs da mesma cor vão estar juntas em cima/baxo– MiguelCommented 29/07/2016 às 14:10
<!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>