Different CSS Styles for 10 List
items

Question

What i have here is this:

<ul class="bwp-rc-ulist">

<li class="recent-comment">Item 1</li>
<li class="recent-comment">Item 2</li>
<li class="recent-comment">Item 3</li>
<li class="recent-comment">Item 4</li>
<li class="recent-comment">Item 5</li>
<li class="recent-comment">Item 6</li>
<li class="recent-comment">Item 7</li>
<li class="recent-comment">Item 8</li>
<li class="recent-comment">Item 9</li>
<li class="recent-comment">Item 10</li>

</ul>

I want to add the following CSS styles:

li.list1, li.list6 { background-color: red; }
li.list2, li.list7 { background-color: blue; }
li.list3, li.list8 { background-color: black; }
li.list4, li.list9 { background-color: yellow; }
li.list5, li.list10 { background-color: gray; }

unfortunately, i cannot do that because the UL & LI is dynamically created by a wordpress plugin (Better Wordpress Comment & Except Plugin).

I've already read some nth-child thingy but it doesn't solve my case. maybe if someone can show me what the correct scripts?

I'm also looking for a script that works in IE7-9, chrome and ff.

Thank you very much.

Why wouldn't nth-child work? That seems like the most appropriate solution for this. — Anthony, Sep 10 '12 at 04:08
@Anthony: "The :nth-child() selector is supported in all major browsers, except IE8 and earlier." - http://www.w3schools.com/cssref/sel_nth-child.asp EDIT: here's a IE7/8 solution: http://stackoverflow.com/questions/8492121/ie8-nth-child-and-before — Patrick, Sep 10 '12 at 04:36

yannis · Answer 1 · 2012-09-10T04:30:13.630

CSS solution

ul.bwp-rc-ulist li:nth-child(1),
ul.bwp-rc-ulist li:nth-child(6) {
    background-color: red;
}

ul.bwp-rc-ulist li:nth-child(2),
ul.bwp-rc-ulist li:nth-child(7) {
    background-color: blue;
}

ul.bwp-rc-ulist li:nth-child(3),
ul.bwp-rc-ulist li:nth-child(8) {
    background-color: black;
}

ul.bwp-rc-ulist li:nth-child(4),
ul.bwp-rc-ulist li:nth-child(9) {
    background-color: yellow;
}

ul.bwp-rc-ulist li:nth-child(5),
ul.bwp-rc-ulist li:nth-child(10) {
    background-color: gray;
}

or if you prefer it a bit more compact:

ul.bwp-rc-ulist li:nth-child(5n+1) {
    background-color: red;
}

ul.bwp-rc-ulist li:nth-child(5n+2) {
    background-color: blue;
}

ul.bwp-rc-ulist li:nth-child(5n+3) {
    background-color: black;
}

ul.bwp-rc-ulist li:nth-child(5n+4) {
    background-color: yellow;
}

ul.bwp-rc-ulist li:nth-child(5n+5) {
    background-color: gray;
}

jQuery solution (with your CSS)

$('ul.bwp-rc-ulist li.recent-comment').each(function(index) {
    $(this).addClass("list" + (index + 1));
});

Hi Yannis, thank you for your help. Unfortunately, it's not compatible in IE7 and IE8. BUt thank you very much for your help. I really appreciate the effort! :) — Scarlet Ariadne Vela, Sep 10 '12 at 05:17
@ScarletAriadneVela That's why I added the jQuery solution ;) [Snger's Javascript solution](http://stackoverflow.com/a/12345291/99456) should also work in IE7/8. _Don't_ use my jQuery script if you are not already using jQuery, it would be an overkill to load the library just for this. — yannis, Sep 10 '12 at 05:18

score 2 · Accepted Answer · answered Sep 10 '12 at 04:18

2

HTML:

<ul id="ulEle"  class="bwp-rc-ulist">
    <li class="recent-comment">Item 1</li>
    <li class="recent-comment">Item 2</li>
    ...
</ul>

OR:

<div  id="ulEle">
    <ul  class="bwp-rc-ulist">
        <li class="recent-comment">Item 1</li>
        <li class="recent-comment">Item 2</li>
        ...
    </ul>
</div>

JS:

<script type="text/javascript">
  var ulGet=document.getElementById("ulEle");
  var liList=ulGet.getElementsByTagName("li");
  for(var i=0;i<liList.length;i++)
  {
      liList[i].style.className="list"+(parseInt(i)+1);
  }
</script>

answered Sep 10 '12 at 04:18

Snger

1,374
19
23

wow! Snger, thank you for your help! about the line:
– Scarlet Ariadne Vela Sep 10 '12 at 05:20
...is it possible if you can provide me a code that calls it's CLASS NAME "bwp-rc-ulist? instead of using getElementById("ulEle");? – Scarlet Ariadne Vela Sep 10 '12 at 05:28
disregard my last question, i found a way how can i insert that ID="ulEle" to be aligned with your codes. thank you very much! i really want to vote for your answer but unfortunately i'm still a newbie here and i don't have that priviledge yet. All i can do is accept your correct answer. – Scarlet Ariadne Vela Sep 10 '12 at 05:35
:> [How to Get Element By Class in JavaScript?](http://stackoverflow.com/questions/3808808/how-to-get-element-by-class-in-javascript) [How to getElementByClass instead of GetElementById with Javascript?](http://stackoverflow.com/questions/1933602/how-to-getelementbyclass-instead-of-getelementbyid-with-javascript) – Snger Sep 10 '12 at 05:43

score 0 · Answer 3 · answered Sep 10 '12 at 04:15

0

try this css

http://jsfiddle.net/hVspz/

li:nth-child(6n+1) {  
  color: red; 
}

li:nth-child(6n+2) {  
  color: blue;
}

and so on

answered Sep 10 '12 at 04:15

Mandar

498
1
4
17

Couple of small mistakes, it should be `5n+1`, and it's the `background-color` we are trying to set. – yannis Sep 10 '12 at 04:24
ya ofcourse. I was just trying to suggest a way instead of feeding the exact solution :) – Mandar Sep 10 '12 at 04:25

Different CSS Styles for 10 List items

3 Answers3

Different CSS Styles for 10 List
items