Seperate styling for 3 alternate li's

Question

Im working on a project and im using ul and li's.

I have to change background for 3 alternate li's. since list item is coming from backend I won't be knowing about number of list item.

I tried with css3 child classes but couldn't able to achieve.. Is there any way i can achieve this with css or jquery?

.list-item li
{
  width:30%;
  display:inline-block;
 }

<ul class="list-item">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
  <li>list item 7</li>
  <li>list item 8</li>
  <li>list item 9</li>
</ul>

same background color for list 1,2,3,7,8 and 9 and different background color for list 4,5 and 6.

As you can see in image, Here I am using table and I am achieving this using nth-child(even)/(odd) property.because of few restrictions I can't use table here. So need to achieve this using li's.

Please put code and markup which you have done so far and jsfiddle will be best to help you out in no time — Mohtisham Zubair, Feb 07 '17 at 06:52
Possible duplicate of [:nth-child(even/odd) selector with class](http://stackoverflow.com/questions/17458582/nth-childeven-odd-selector-with-class) — sandrooco, Feb 07 '17 at 07:00
@Sandrooco i want to seperate 3 alternative li's ..not like that — IamGrooot, Feb 07 '17 at 07:03
look at my answer. every 3 `li`s are colored as a table rows. — Banzay, Feb 07 '17 at 07:22

stewo · Answer 1 · 2017-02-07T07:35:24.483

I assume you want to achieve this?

To change styling for every third item use :nth-child() with i.e. 3n+0 as an argument. If you solve that equation when counting n from 0 upwards you will get the indexes of the items which will be addressed.

Btw:

2n+0 in other words is even
2n+1 in other words is odd

edit:

I added a JS function for achieving something like alternating rows like in the picture which was added in the question later. Have a look at the fiddle!

var alternate = (function() {

  var count = 0;
  var flipAt = 3;
  var condition = false;

  function init(num) {
    flipAt = num;
  }
  
  function process() {
    if(count === flipAt) {
      condition = condition ? false : true;
      count = 0;
    }
    count++;
    return condition ? true : false;
  }

  return {
    init : init,
    process : process
  }
})()


$('li').each(function(index, el) {
  if (alternate.process()) {
    $(el).css('background', 'blue');
  }
});

li:nth-child(3n+0) {
    background: red;
}

li:nth-child(3n+1) {
    border: 2px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>14</li>
</ul>

thanks for the quick response .. I am looking for seperate style for 3 alternate li's ..if yu look at the image I attached yu will get the clear idea — IamGrooot, Feb 07 '17 at 07:12
Yup, saw that later - and fiddled some JS - but have a look at Banzays CSS only answer! — stewo, Feb 07 '17 at 07:38

score 1 · Answer 2 · answered Feb 07 '17 at 07:06

1

Yo can use following CSS

li:nth-child(3n+0) {
    background: red;
}
li:nth-child(3n+1) {
    background: green;
}
li:nth-child(3n+2) {
    background: blue;
}

for working example Click here

answered Feb 07 '17 at 07:06

Super User

9,448
3
31
47

thumbs up, great way – Mohtisham Zubair Feb 07 '17 at 07:42

Banzay · Accepted Answer · 2017-02-07T07:21:37.730

You need to style 6nth, 6n-1th and 6n-2th items:

.list-item li
{
  width:30%;
  display:inline-block;
  background: #cfc;
 }
.list-item li:nth-child(6n-2),
.list-item li:nth-child(6n-1),
.list-item li:nth-child(6n){
  background: #ccf;
}

<ul class="list-item">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
  <li>list item 7</li>
  <li>list item 8</li>
  <li>list item 9</li>
  <li>list item 10</li>
  <li>list item 11</li>
  <li>list item 12</li>
  <li>list item 13</li>
  <li>list item 14</li>
  <li>list item 15</li>
  <li>list item 16</li>
  <li>list item 17</li>
  <li>list item 18</li>
</ul>

Seperate styling for 3 alternate li's

3 Answers3