Search code examples
htmlcsscss-selectorssiblings

How to select nth sibling after specific class based on any number multiple with CSS?

I tried to create one page like this: enter image description here

Of course this is just a summary of my project. I want to show after every div with class="s1"

(first & 4n+1'th) div with class="s2" in 'white' background
(first & 4n+2'th) div with class="s2" in 'black' background
(first & 4n+3'th) div with class="s2" in 'black' background
(first & 4n+4'th) div with class="s2" in 'white' background

-----------------------------------------------------------
              every div with class="s1"
-----------------------------------------------------------
4n+1'th div with class="s2" |  4n+2'th div with class="s2"
     (White background)     |      (Black background)
-----------------------------------------------------------
4n+3'th div with class="s2" |  4n+4'th div with class="s2"
     (Black background)     |      (White background)
-----------------------------------------------------------

And repeat this cycle for every div with class="s1". I insert my simple code too.as you see in my snippet some of div with class="s2"
have wrong float side and some of them has same color in one row or
first div after div with class="s1" start with black background.

body {
  background: gray;
  color: blue;
  position: relative;
}
* {
  text-align: center;
  vertical-align: middle;
  margin: auto;
}
div {
  height: 50px;
  display: table;
  margin: auto;
  margin-bottom: 10px;
}
.s1 {
  width: 100%;
  clear: both;
  background: lightgreen;
}
.s2 {
  width: 50%;
}
a,
h2 {
  display: table-cell;
  height: 100%;
}
/*----------------------------------------------------*/

/*-------mistakes in float&color under second S1------*/

/*-------mistakes in float&color under third  S1------*/

/*----------------------------------------------------*/

.s2:nth-child(odd) {
  float: right;
}
.s2:nth-child(even) {
  float: left;
}
.s2:nth-of-type(4n+4) {
  background: black;
}
.s2:nth-of-type(4n+3) {
  background: black;
}
.s2:nth-of-type(4n+2) {
  background: white;
}
.s2:nth-of-type(4n+1) {
  background: white;
}
/*----------------------------------------------------*/
<div class="s1">
  <h2>first S1</h2></div>
<div class="s2"><a>S2-1a</a></div>
<div class="s2"><a>S2-2a</a></div>
<div class="s2"><a>S2-3a</a></div>
<div class="s2"><a>S2-4a</a></div>
<div class="s2"><a>S2-5a</a></div>
<div class="s2"><a>S2-6a</a></div>
<div class="s2"><a>S2-7a</a></div>
<div class="s2"><a>S2-8a</a></div>
<div class="s1"><h2>second S1</h2>
</div>
<div class="s2"><a>S2-1b</a>
</div>
<div class="s2"><a>S2-2b</a>
</div>
<div class="s2"><a>S2-3b</a>
</div>
<div class="s2"><a>S2-4b</a>
</div>
<div class="s2"><a>S2-5b</a>
</div>
<div class="s1">
  <h2>third S1</h2>
</div>
<div class="s2"><a>S2-1c</a>
</div>
<div class="s2"><a>S2-2c</a>
</div>
<div class="s2"><a>S2-3c</a>
</div>
<div class="s2"><a>S2-4c</a>
</div>

Solution

  • The nth-of-class doesn't exists, and the nth-of-type will target them all, so, you'll need to wrap the .s2 in a div. You can then remove the classes and target them by using .s1+div>div

    body {
    background: gray;
    color: blue;
    position: relative;
}
* {
    text-align: center;
    vertical-align: middle;
    margin: auto;
}
div {
    height: 50px;
    display: table;
    margin: auto;
    margin-bottom: 10px;
}
.s1+div {
    display: block;
}
.s1 {
    width: 100%;
    clear: both;
    background: lightgreen;
}
.s1+div>div {
    width: 50%;
}
a, h2 {
    display: table-cell;
    height: 100%;
}
/*----------------------------------------------------*/

/*-------mistakes in float&color under second S1------*/

/*-------mistakes in float&color under third  S1------*/

/*----------------------------------------------------*/
.s1+div>div:nth-child(odd) {
    float: left;
}
.s1+div>div:nth-child(even) {
    float: right;
}
.s1+div>div:nth-of-type(4n+1),
.s1+div>div:nth-of-type(4n+4) {
    background: white;
}

.s1+div>div:nth-of-type(4n+2),
.s1+div>div:nth-of-type(4n+3) {
    background: black;
}
/*----------------------------------------------------*/
    <div class="s1">
    <h2>first S1</h2>
</div>
<div>
    <div><a>S2-1a</a></div>
    <div><a>S2-2a</a></div>
    <div><a>S2-3a</a></div>
    <div><a>S2-4a</a></div>
    <div><a>S2-5a</a></div>
    <div><a>S2-6a</a></div>
    <div><a>S2-7a</a></div>
    <div><a>S2-8a</a></div>
</div>
<div class="s1">
    <h2>second S1</h2>
</div>
<div>
    <div><a>S2-1b</a></div>
    <div><a>S2-2b</a></div>
    <div><a>S2-3b</a></div>
    <div><a>S2-4b</a></div>
    <div><a>S2-5b</a></div>
</div>
<div class="s1">
    <h2>third S1</h2>
</div>
<div>
    <div><a>S2-1c</a></div>
    <div><a>S2-2c</a></div>
    <div><a>S2-3c</a></div>
    <div><a>S2-4c</a></div>
</div>