Свойство nth-child для трехколоночного макета?

Question

Свойство nth-child для трехколоночного макета?

0

Как реализовать свойство nth-child для трех столбцов, в которых сообщения отображаются в цикле.

Теперь я хотел указать свойство nth-child для

1st,4th,7th,10th,13th child respectively and so
and
2nd,5th,8th,11th,14th child respectively and so on 
and 
3rd,6th,9th,12th ,15th child respectively and so on

для разных CSS

Mehar 17 апр. 2014, в 15:44

Источник

3

:nth-child(3n+1) , 3n+2 , 3n ...
Niet the Dark Absol 17 апр. 2014, в 13:25
0

@NiettheDarkAbsol спасибо
Mehar 17 апр. 2014, в 13:31
0

@NiettheDarkAbsol это очень выиграет от короткого объяснения того, что: nth-child () вычисление.
TylerH 17 апр. 2014, в 13:35

Показать ещё 1 комментарий

Теги:

html

css

css-selectors

2 ответа

Ещё вопросы

@NiettheDarkAbsol это очень выиграет от короткого объяснения того, что: nth-child () вычисление.

C Travel · Answer 1 · 2014-04-17T10-31-00.000Z

Вы можете использовать nth-child как это. Я использовал все это как divs в демо.

Html:

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

Css:

div {width:33%; background:grey; height:50px; float:left;}
div:nth-child(3n-1){background:green;}
div:nth-child(3n){background:blue;}

DEMO

3n - 1 ..? Разве это не будет искать элемент индекса -1 когда n = 0 ?
Хороший вопрос @Mr_Green не думал об этом, потому что это работает ..
@Mr_Green Так? 3n+2 будет искать 1001-й элемент, когда n = 333 , но нас это волнует?
хе-хе .. я просто дергал ногу: D. но серьезно, будет ли этот элемент искать -1 индекс, когда n равно 0?
Я не знаю ... но это действительно? да .. при использовании + вы только меняете направление движения css .. в моем случае меняйте цвета ...

Shoaib Chikate · Answer 2 · 2014-04-17T11-18-00.000Z

Предполагая, что все дочерние элементы li, вы можете использовать nth-child как это.

Код CSS:

ul > li:nth-child(3n+1){
   /*whatever your property may be*/
  background-color:orange;    
}

ul > li:nth-child(3n+2){

   background-color:white;    
}

ul >li:nth-child(3n){    
   background-color:green;
}

JS FIDDLE