I have simple HTML like below:
<div class="col-md-4">
<div class="col-md-4">
<div class="panel panel-waing">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-home" style="font-size: 50px;" aria-hidden="true"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><span id="lbltot_sch">12345</span></div>
<div>Count</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4" id=dvStats>
<div class="col-md-4">
<div class="panel panel-waing">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-home" style="font-size: 50px;" aria-hidden="true"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><span id="lbltot_sch">454545</span></div>
<div>Count</div>
</div>
</div>
</div>
</div>
</div>
</div>
And on DOM ready event I am changing panel heading background-color (Ok, working fine):
$(".panel-heading").css("border-color", colorCode);
$(".panel-primary").css("border-color", colorCode);
But I do not want to change background-color all panels which are inside dvStats div. I think I have to use JQuery .not(), but i am missing something.
I Have tried below code:
$(".panel-primary").not("#dvStats .panel-primary").css("border-color", colorCode);
$(".panel-heading").not("#dvStats .panel-heading").css("border-color", colorCode);
How can I prevent applying styles to HTML elements inside a particular DIV dvStats although they hve the same class i.e. panel-waing, panel-heading?
