Change color attribute for hyperlink inside div when div has a certain class
I would like to change the font color to white
for a hyperlink inside a div when the div has a certain class rgSelected
applied to it. Usually, without the class rgSelected
, the hyperlink has a red font color.
Question
How would I make sure the font color of the hyperlink is white when the div has a class rgSelected
that is applied to it and a different font color for it red
? I'm not sure if this can be achieved with pure CSS or combined with jQuery.
<div class="alternatingItem rgSelected">
<a onclick="sendEmail()" style="color:red;">Employee1<a>
</div>
source to share
You don't need jquery for this. I am using value because you have an inline style on the element a
and overwrite it from the css rule.
.rgSelected a {
color: green !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alternatingItem rgSelected">
<a onclick="sendEmail()" style="color:red;">Employee1<a>
</div>
source to share
/*
set default `css` property of `.alternatingItem` child `a` `color` to `red`
if `.alternatingItem` does not have `class` `rgSelected`
*/
.alternatingItem:not(.rgSelected) a {
color:red;
}
/*
if `.alternatingItem` has `class` `rgSelected` , set
child `a` `css` property `color` to `white`
*/
.alternatingItem.rgSelected a {
color:white;
}
function sendEmail() {}
$("a").click(function(e) {
$(this).parent().toggleClass("rgSelected")
})
.alternatingItem:not(.rgSelected) a {
color: red;
}
.alternatingItem.rgSelected a {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="alternatingItem">
<a onclick="sendEmail()">Employee1<a>
</div>
source to share