Question

I want to select a bunch of spans in a div whose CSS contains a particular background color. How do I achieve this?

Answer 1

if i understand the question correctly, the selector [attribute=value] will not work because <span> does not contain an attribute ‘background-color’. you can test that out quickly to confirm it won’t match anything:

$('#someDiv span[background-color]').size(); // returns 0 

given:

.one, .two {   background-color: black; }  .three {   background-color: red; } 

here’s a snippet that will work:

$('div#someDiv span').filter(function() {     var match = 'rgb(0, 0, 0)'; // match background-color: black     /*         true = keep this element in our wrapped set         false = remove this element from our wrapped set                                                          */     return ( $(this).css('background-color') == match );  }).css('background-color', 'green'); // change background color of all black spans

.one, .two {   background-color: black; }  .three {   background-color: red; }

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js'></script>  <div id='someDiv'>     <span class='one'>test one</span>     <span class='two'>test two</span>     <span class='three'>test three</span> </div>