My goal is to customize a specific class within a group of elements that have the same class name, based on whether it contains specific text or not. While I have successfully used addClass in jQuery, the challenge I now face is that the main CSS class is overriding it. Below is the code snippet:
HTML
<div id="master">
<div>
<div class="attributes">
<a href="#">Not important</a>
</div>
</div>
<div>
<div class="attributes">
<a href="#">Not important</a>
</div>
</div>
<div>
<div class="attributes">
<a href="#">Important Text and Other Stuff</a>
</div>
</div>
<div>
<div class="attributes">
<a href="#">Not important</a>
</div>
</div>
</div>
Original CSS
#master div.attributes {
float: left;
font-size: 12px;
margin-top: 0px !important;
width: 330px;
clear: both;
}
.attributes {
color: #58585a !important;
font-size: 14px;
margin: -10px 0 0 !important;
}
jQuery used
$('div.attributes:contains("Important Text")').addClass('attributes2');
Additional CSS
.attributes2
{
clear: none;
float: right;
font-size: 12px;
margin-top: 0;
width: 330px;
}
Although .attributes2 was successfully added and applied, the styling from #master div.attributes takes precedence. Does anyone have a solution for this issue? I've searched extensively on Google and Stack Overflow but haven't found a resolution yet. It's worth mentioning that I cannot modify the HTML id and class names, but have the ability to adjust the CSS and jQuery.
Thank you in advance.