Выделить элементы в нужном порядке

167

06 октября 2018, 09:10

Как можно с использованием nth-of-type или nth-child выделить элементы в таком порядке:

2-3-7-8-12-13-17-18... (начинать со второго, выделять каждые два и пропускать три)

и в таком:

4-5-6-9-10-11-14-15-16...

Пытаюсь сделать разметку для карточек. Первая карточка должна занимать 12 колонок, вторая и третья по 6, четвертая, пятая и шестая по 4, потом опять две карточки по 6, потом три по 4 и так далее...

Примерно так:

——————————————————————— ——————————— ——————————— ——————— ——————— ——————— ——————————— ——————————— ——————— ——————— ——————— ——————————— ——————————— ——————— ——————— ———————

Answer 1

Пример №1

span { 
  display: inline-block; 
  padding: 5px; 
  background: #ccc; 
  margin: 5px; 
} 
 
span:nth-of-type(5n + 2), 
span:nth-of-type(5n + 3) { 
  background: #f00; 
}

<span>1</span> 
<span>2</span> 
<span>3</span> 
<span>4</span> 
<span>5</span> 
<span>6</span> 
<span>7</span> 
<span>8</span> 
<span>9</span> 
<span>10</span> 
<span>11</span> 
<span>12</span> 
<span>13</span> 
<span>14</span> 
<span>15</span> 
<span>16</span> 
<span>17</span> 
<span>18</span> 
<span>19</span> 
<span>20</span>

Пример №2

span { 
  display: inline-block; 
  padding: 5px; 
  background: #ccc; 
  margin: 5px; 
} 
 
span:nth-of-type(5n + 4), 
span:nth-of-type(5n + 5), 
span:nth-of-type(5n + 6) { 
  background: #f00; 
}

<span>1</span> 
<span>2</span> 
<span>3</span> 
<span>4</span> 
<span>5</span> 
<span>6</span> 
<span>7</span> 
<span>8</span> 
<span>9</span> 
<span>10</span> 
<span>11</span> 
<span>12</span> 
<span>13</span> 
<span>14</span> 
<span>15</span> 
<span>16</span> 
<span>17</span> 
<span>18</span> 
<span>19</span> 
<span>20</span>