Combining CSS nth-child functions

Question

This is my DOM. I need to select the middle column three times, skip a node, repeat:

+-------------------+  <div class="grid">
| +---+ +---+ +---+ |    <div class="cell">1</div>
| | 1 | | 2 | | 3 | |    <div class="cell">2</div>
| +---+ +---+ +---+ |    <div class="cell">3</div>
| +---+ +---+ +---+ |    <div class="cell">4</div>
| | 4 | | 5 | | 6 | |    <div class="cell">5</div>
| +---+ +---+ +---+ |    <div class="cell">6</div>
| +---+ +---+ +---+ |    <div class="cell">7</div>
| | 7 | | 8 | | 9 | |    <div class="cell">8</div>
| +---+ +---+ +---+ |    <div class="cell">9</div>
| +---------------+ |
| |    AD UNIT    | |    <div class="adUnit"></div>
| +---------------+ |
| +---+ +---+ +---+ |    <div class="cell">11</div>
| | 11| |12 | |13 | |    <div class="cell">12</div>
| +---+ +---+ +---+ |    <div class="cell">13</div>
| +---+ +---+ +---+ |    <div class="cell">14</div>
| |14 | |15 | |16 | |    <div class="cell">15</div>
| +---+ +---+ +---+ |    <div class="cell">16</div>
| +---+ +---+ +---+ |    <div class="cell">17</div>
| |17 | |18 | |19 | |    <div class="cell">18</div>
| +---+ +---+ +---+ |    <div class="cell">19</div>
| +---------------+ |
| |    AD UNIT    | |    <div class="adUnit"></div>
| +---------------+ |
| +---+ +---+ +---+ |    <div class="cell">21</div>
| |21 | |22 | |23 | |    <div class="cell">22</div>
| +---+ +---+ +---+ |    <div class="cell">23</div>
| +---+ +---+ +---+ |    <div class="cell">24</div>
| |24 | |25 | |...| |    <div class="cell">25</div>
| +---------------+ |    <!-- ... -->
+-------------------+  </div>

tldr

I need to select the following sequence [of children nodes]:

 2,  5,  8,
12, 15, 18,
22, 25, 28,
32, 35, 38, ...

I have achieved this with three separate nth-child functions:

• .grid .cell:nth-child(10n + 2) (2, 12, 22, 32, ...)
• .grid .cell:nth-child(10n + 5) (5, 15, 25, 35, ...)
• .grid .cell:nth-child(10n + 8) (8, 18, 28, 38, ...)

Question:

Can these three functions possibly be rewritten into a single one?

Answer 1

Turns out there's no way to use nth-child or nth-of-type to do what you're after as nth-of-type looks to what type of element you're selecting, not the class.

If you can change the type of element for your ad unit you could get away with nth-of-type, e.g:

<div class="cell">1</div>
<aside class="adUnit"></aside>
<div class="cell">2</div>

If you can make that change then nth-of-type should allow you to target your divs instead of the asides, e.g:

.grid > div.cell:nth-of-type(3n+2) { }

EDIT: Adjusted selector as per web-tiki's comment.

Answer 2

If you add two empty cells just before (or within) the AdUnit-class it will work.

Empty cells

<div class="cell hide"></div>
<div class="cell hide"></div>

CSS

.cell:nth-child(3n + 2)

Example:

body {
    margin: 0px;
    padding: 0px;
    font-size: 0px;
}
.cell {
    width: calc(100% / 3);
    display: inline-block;
    font-size: 14px;
    background: yellow;
    text-align: center;
}
.adUnit {
    width: 100%;
    background: red;
    font-size: 14px;
    padding: 6px 0px;
    text-align: center;
}
.cell:nth-child(3n + 2) {
    background: navy;
    color: white;
}
.hide {
    display: none;
}

<div class="grid">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
    <div class="cell">7</div>
    <div class="cell">8</div>
    <div class="cell">9</div>
    <div class="cell hide"></div>
    <div class="cell hide"></div>
    <div class="adUnit">AdUnit</div>
    <div class="cell">11</div>
    <div class="cell">12</div>
    <div class="cell">13</div>
    <div class="cell">14</div>
    <div class="cell">15</div>
    <div class="cell">16</div>
    <div class="cell">17</div>
    <div class="cell">18</div>
    <div class="cell">19</div>
    <div class="cell hide"></div>
    <div class="cell hide"></div>
    <div class="adUnit">AdUnit</div>
    <div class="cell">21</div>
    <div class="cell">22</div>
    <div class="cell">23</div>
    <div class="cell">24</div>
    <div class="cell">25</div>
    <div class="cell">26</div>
    <div class="cell">27</div>
    <div class="cell">28</div>
    <div class="cell">29</div>
</div>