CODEWITHSUNDEEP
jquerycss
derdida
derdida

Reputation: 14904

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

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?

Upvotes: 0

Views: 1995

Answers (2)

Marvin
Marvin

Reputation: 10092

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

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53674

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>

Upvotes: 1

Related Questions