1

Como posso fazer para que uma DIV mude sua cor na próxima instância da mesma?

inserir a descrição da imagem aqui

Em duas em duas consigo gerar este efeito: inserir a descrição da imagem aqui

1
  • divide elas em classe 1 (grupo de divs com cor mais clara), classe 2 (grupinho das divs com cores mais escuras) e para definir as suas posições vc põe ids diferentes e define as posições individualmente como bem entender
    – Sarah
    Commented 29/07/2016 às 13:49

3 Respostas 3

7

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>

4

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>

1
  • 1
    Ricardo 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
    – Miguel
    Commented 29/07/2016 às 14:10
0

Bom espero que isto te ajude:inserir a descrição da imagem aqui

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .