Подтвердить что ты не робот

Объединение функций nth-child CSS

Это мой ДОМ. Мне нужно выбрать средний столбец три раза, пропустить node, повторить:

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

TL;DR

Мне нужно выбрать следующую последовательность [дочерних узлов]:

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

Я достиг этого с тремя отдельными функциями nth-child:

  • .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,...)

Вопрос:

Могут ли эти три функции быть переписаны в один?

4b9b3361

ОТВЕТЫ

Ответ 1

Невозможно использовать nth-child или nth-of-type, чтобы делать то, что вам нужно, поскольку nth-of-type ищет тип выбранного вами элемента, а не класс.

Если вы можете изменить тип элемента рекламного блока, вы можете уйти с nth-of-type, например:

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

Если вы можете сделать это изменение, то nth-of-type позволит вам настроить таргетинг на ваши div, а не на asides, например:

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

EDIT: скорректированный селектор в соответствии с комментарием веб-тики.

Ответ 2

Если вы добавите две пустые ячейки раньше (или внутри) AdUnit-class, она будет работать.

Пустые ячейки

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

CSS

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

Пример: 

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>

Ответ 3

		* {
		  box-sizing: border-box;
		  margin: 0;
		  padding: 0;
		}
		.item {
		  display: list-item;
		  list-style-type: decimal;
		  list-style-position: inside;
		  width: 33.3333%;
		  float: left;
		  border: 1px solid #000;
		}
		.text {
		  height: 50px;
		  text-align: center;
		  line-height: 50px;
		}
		.pay-me {
		  display: block;
		  width: 100%;
		  height: 50px;
		  vertical-align: middle;
		  border: 1px dashed #000;
		  text-align: center;
		  clear: left;
		}
		.item:nth-of-type(3n-1) {
		  background: tomato;
		  color: #fff;
		}
		
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<span class="text pay-me">Has Ad</span>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<span class="text pay-me">Has Ad</span>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<span class="text pay-me">Has Ad</span>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<span class="text pay-me">Has Ad</span>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>
<div class="text item"></div>