How to alternate background colour on DIV rows? (Jquery and/or CSS)

Question

I am customising the CSS for existing HTML output. So I can't change the output, I can only add script (Jquery / Javascript) and custom CSS.

The output produces rows, which form a list of items. This is the structure of the CSS identifiers:

<div> <div class="D F"> <div id=":b" class="G"> <div id=":c" class="G"> <div id=":d" class="G"> <div id=":e" class="G"> <div id=":f" class="G"> <div id=":g" class="G"> <div id=":h" class="G"> </div> </div>

The ID of the divs can vary. In some cases it's as shown in my example, in other cases it has :1, :2, :3, etc. Or some other number/letter combination. So that's not something I can rely on for making CSS declarations.

I have tried using the following script, to no effect (found, and modified from here):

$('.D>div:odd').css("background-color", "#ff0000"); $('.D>div:even').css("background-color", "#00ff00");

I also tried the following CSS (found and modified from here):

div.G div:nth-child(even) {background: #CCC;} div.G div:nth-child(odd) { background: #FFF;}`

But this made every div row grey. They did not alternate.

I created a fiddle here: http://jsfiddle.net/inspirednz/qgb9s8cq/4/

That one includes various other divs that are nested within the divs I am targeting. I have left them in that fiddle, because for some reason (which is not clear to me) the alternate colour I declared actually affects one of the div rows (div.V). But not the others.

Here is another fiddle, with all the nested divs taken out. In this instance the same CSS has no effect at all.

http://jsfiddle.net/inspirednz/qgb9s8cq/3/

you want random colors or what ?

Marko Mackic
– Marko Mackic

2016-07-25 23:31:01 +00:00
Commented Jul 25, 2016 at 23:31 — Marko Mackic
– Marko Mackic, Commented Jul 25, 2016 at 23:31

Marko Mackic · Accepted Answer · 2016-07-25 23:32:28Z

7

If I understood correctly what you want,then you want to target your div's not divs inside them :

div.G:nth-child(even) {background: #CCC;} div.G:nth-child(odd) { background: #FFF;}

It's always preferable to use css over js, because it's hardware accelarated.

Fiddle http://jsfiddle.net/qgb9s8cq/5/

answered Jul 25, 2016 at 23:32

Marko Mackic

2,3431 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

inspirednz Over a year ago

Brilliant. Thanks. Glad to see I was almost there. So, the CSS I was using was targeting the embedded divs. I wondered why that extra "div" was there, but never thought to take it out! So glad to have this working, and glad it's all done with CSS. Thanks Marko.

gdeleon101 Over a year ago

This works great, but in my case I have a filter. When I'm under the "all" filter they are correct, but when I click on another filter the even and odd don't refresh under the new filter. Some odds are together, and some evens are together. Not sure how to adjust for my situation.

Almond · Accepted Answer · 2016-07-25 23:48:57Z

Is this what you're looking for? I'm not really familiar with CSS3, but I gave it a shot.

http://jsfiddle.net/qgb9s8cq/6/

div.G:nth-child(even) { background: #CCC; } div.G:nth-child(odd) { background: #FFF; }

Guess I should have refreshed before posting...

Thanks Almond. Much appreciated. Yep, seems Marko bet you too it. I've marked your answer and useful, and his as the correct one (since he was first). :-)

Collectives™ on Stack Overflow

How to alternate background colour on DIV rows? (Jquery and/or CSS)

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related