<div class="wrap">
<div class="c"></div>
<div class="c"></div>
<div class="b"></div>
<div class="c"></div>
<div class="c"></div>
<div class="b"></div>
</div>
/* select all .c that immediately follow .c */
.c + .c {
background-color: blue;
}
/* select all .b that follow .c */
.c ~ .b {
background-color: red;
}
body {
background-color: grey;
padding-top: 180px;
}
.wrap {
width: 360px;
height: 360px;
border: 5px solid black;
margin: 0 auto;
}
.wrap div {
width: 350px;
height: 50px;
border: 5px solid black
}
.c {
background-color: yellow;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.