Нужна формула для псевдокласса :nth-child сss

219

21 декабря 2017, 23:50

Нужно разместить прямоугольные дивы вот так, я так понимаю лучше всего через :nth-child или через :nth-of-type, помогите пожалуйста с формулой которую надо поместить в псевдокласс. Цифры наверху не нужны, нужно только смещение цветов

Answer 1

На чистом css для 4х4

.parent { 
  display: flex; 
  flex-flow: row wrap; 
  width: 200px; 
} 
    
 
.parent > div { 
  width: 25%; 
  height: 50px 
} 
 
 
.parent > div:nth-child(-3n+13) { 
  background: white; 
} 
 
.parent > div:nth-child(-3n+1), 
.parent > div:nth-child(-3n+14) { 
  background: grey; 
} 
 
.parent > div:nth-child(-3n+5), 
.parent > div:nth-child(-3n+15) { 
  background: pink; 
} 
 
.parent > div:nth-child(-3n+9), 
.parent > div:nth-child(-16n+16) { 
  background: red; 
}

<div class='parent'> 
  <div>1</div> 
  <div>2</div> 
  <div>3</div> 
  <div>4</div> 
  <div>5</div> 
  <div>6</div> 
  <div>7</div> 
  <div>8</div> 
  <div>9</div> 
  <div>10</div> 
  <div>11</div> 
  <div>12</div> 
  <div>13</div> 
  <div>14</div> 
  <div>15</div> 
  <div>16</div> 
</div>