Change color of multiple elements with same class with CSS (different count of DOM elements in row)

Question

I would like to change the color of some badges in an list.

<div id="tree">
<ul class="list-group">
    <li class="list-group-item node-tree" ><span class="icon expand-icon glyphicon glyphicon-minus"></span><span class="icon node-icon"></span><a href="#" style="color:inherit;">Test</a><span class="badge">123</span><span class="badge">123</span><span class="badge">3223</span><span class="badge">23</span><span class="badge">323</span></li>
    <li class="list-group-item node-tree"><span class="icon expand-icon glyphicon glyphicon-minus"></span><span class="icon node-icon"></span><a href="#" style="color:inherit;">Test 1</a><span class="badge">321</span><span class="badge">123</span><span class="badge">3223</span><span class="badge">23</span><span class="badge">323</span></li>
</ul>
</div>

It still works with jQuery, for example with:

 $("#tree .list-group-item").each(function(){

            $(this).find('.badge:eq(4)').css('background-color','#bf5329');
            $(this).find('.badge:eq(4)').css('color','#fff');

            $(this).find('.badge:eq(3)').css('background-color','#2ab27b');
            $(this).find('.badge:eq(3)').css('color','#fff');

            $(this).find('.badge:eq(2)').css('background-color','#bf5329');
            $(this).find('.badge:eq(2)').css('color','#fff');

            $(this).find('.badge:eq(1)').css('background-color','#2ab27b');
            $(this).find('.badge:eq(1)').css('color','#fff');

            $(this).find('.badge:eq(0)').css('background-color','#3B4752');
            $(this).find('.badge:eq(0)').css('color','#fff');
        });

But my Problem is, when ill change the tree, i need to call the method again (and again..) - so i would prefer to create the same with CSS only, but when ill try with:

#tree .list-group-item .badge:nth-child(1) {
    background-color: #bf5329;   
}

Its not setting EVERY .list-group-item, only the first one (and there are about 100 "rows".

Any ideas?

Here is a fiddle: https://jsfiddle.net/DTcHh/30190/

Update with CSS: https://jsfiddle.net/DTcHh/30192/

Thanks for your answers - but ill still have a problem if there are some more

 <span>

inside my

 .list-group-item

In this case its a treeview, and there are some "indent" classes. Check out here:

https://jsfiddle.net/DTcHh/30196/

Any more ideas?

only as example - its not working with first-child and nth-child. It only changes the color of the first element in the whole list, not in every row. — derdida, Feb 24 '17 at 21:24
Would you please update your question and include your attempt at `nth-child` ? — devlin carnate, Feb 24 '17 at 21:27
already did - added new version of fiddle too (now i am unable to change any color) — derdida, Feb 24 '17 at 21:28
Of course - but when ill use with the .list-group-item selector, the nth-child(1) should be the first element in EVERY .list-group-item Element? — derdida, Feb 24 '17 at 21:31
Possible duplicate of [Nth-Child CSS Selectors](http://stackoverflow.com/questions/7206573/nth-child-css-selectors) — devlin carnate, Feb 24 '17 at 21:33

score 1 · Accepted Answer · answered Feb 24 '17 at 21:31

1

The equivalent of $('.badge').eq(0) in CSS here will be .badge:nth-child(4) since the first .badge is the 4th child of it's parent. Then you can increment that by 1 to target the rest of them.

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

span.badge {
  color: #fff;
}
span.badge:nth-child(4) {
  background: #3B4752;
}
span.badge:nth-child(5) {
  background: #2ab27b;
}
span.badge:nth-child(6) {
  background: #bf5329;
}
span.badge:nth-child(7) {
  background: #2ab27b;
}
span.badge:nth-child(8) {
  background: #bf5329;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="tree">
<ul class="list-group">
<li class="list-group-item node-tree" data-nodeid="0" style="color:undefined;background-color:undefined;"><span class="icon expand-icon glyphicon glyphicon-minus"></span><span class="icon node-icon"></span><a href="#" style="color:inherit;">Test</a><span class="badge">123</span><span class="badge">123</span><span class="badge">3223</span><span class="badge">23</span><span class="badge">323</span></li>
<li class="list-group-item node-tree" data-nodeid="0" style="color:undefined;background-color:undefined;"><span class="icon expand-icon glyphicon glyphicon-minus"></span><span class="icon node-icon"></span><a href="#" style="color:inherit;">Test 1</a><span class="badge">321</span><span class="badge">123</span><span class="badge">3223</span><span class="badge">23</span><span class="badge">323</span></li>
</ul>
</div>

answered Feb 24 '17 at 21:31

Michael Coker

52,626
5
64
64

Thanks for your answer - but can u please explain why u use 4,5,6,7,8 element? – derdida Feb 24 '17 at 21:32
1

@derdida `nth-child(1)` doesn't target the first instance of an element, it targets the selector if it's the first child of an element. – Michael Coker Feb 24 '17 at 21:34
Ah thanks for your answer! Gimme one second please ill try it out with my list of about 100 rows. – derdida Feb 24 '17 at 21:34
So my problem now is when ill use and additional class (in this case "indent, to make an tree" - i am unable to use css in this case (because there are additional inside my
- is it possible to solve this with CSS only? Check out here: https://jsfiddle.net/DTcHh/30195/

derdida

Feb 24 '17 at 21:39

@derdida give the little icons you want to color a consistent parent so that `:nth-child()` will be the same between the rows. https://jsfiddle.net/DTcHh/30197/ – Michael Coker Feb 24 '17 at 21:45

I just want to color the existing badges - this is an existing treeview plugin (otherwise i need to extend that in the plugin) - can i explain please what have you changed in the html? i cant find it ;) - and thanks for your help! – derdida Feb 24 '17 at 21:49

1

@derdida Just wrap the badges in `...` then make the CSS change I made which references different indexes of `:nth-child()` – Michael Coker Feb 24 '17 at 21:50

1

Thanks again - i will extend the plugin with this tiny wrapper! – derdida Feb 24 '17 at 21:55

score 1 · Answer 2 · edited May 23 '17 at 12:09

Each of your .list-group-item consists of the following elements:

<span class="icon expand-icon glyphicon glyphicon-minus"></span>
<span class="icon node-icon"></span>
<a href="#" style="color:inherit;">Test</a>
<span class="badge">123</span>
<span class="badge">123</span>
<span class="badge">3223</span>
<span class="badge">23</span>
<span class="badge">323</span>

Then e.g. .list-group-item .badge:nth-of-child(1) will select each child of list-group-item that

has the class .badge AND
is the first child of its parent.

However, the first child of list-group-item is <span class="icon /* ... */"></span>, so the selector won't match. You can either go with what Michael Coker describes in his answer (select the 4th child and so on) or use e.g. <i> tags for the icons, so you can make use of the nth-of-type-selector:

span:nth-of-type(1) { /* ... */ }

What would fit best for your example would be some nth-of-class-selector, which unfortunately does not exist. It would allow a maximum of flexibility with the number of elements (which isn't given in Michael's answer) and a maximum of flexibility with using <span>s also for other childs of .list-group-item, that are not badges (which isn't given in my answer).

So it is unable to do something (as shown in my latest fiddle) with pure css? — derdida, Feb 24 '17 at 21:45
It is possible by changing the markup, so that the badges have a parent that does not contain childs other than badges. See Michael's latest comment ^^ — Marvin, Feb 24 '17 at 21:48
Thanks Marvin for your help! I will extend the plugin with this tiny code. — derdida, Feb 24 '17 at 21:55

Change color of multiple elements with same class with CSS (different count of DOM elements in row)

2 Answers2