Carl Carl - 14 days ago 5
CSS Question

Change css style without affecting other elements

Now I have

a
element who change color of button to blue... That I want to do I think is very simple but I donĀ“t have enough knowledge of css.

I want to do another class without removing current class, How can I do it?

jsFiddle

Code:

<div>
<div class='btn btn-success'>
<a href='javascript:Addlog(" + id + ");' role='button'>
<i class='fa fa-pencil-square-o'></i> Complete</a>
</div></div>


CSS:

a, .a {
color: #003F8F;
}

a:hover, a:focus {
color: #23527c;
text-decoration: underline;
}


I want to add something like:

a, .a {
color: white;
}

a:hover, a:focus {
color: white;
text-decoration: none;
}


But without removing current css to not affect code that already exists

Answer

Use a CSS class then which you can dynamically add or remove from arbitrary elements.

.light {
    color: white;
}

a.light:hover, 
a.light:focus {
    color: white;
    text-decoration: none;
}

JS example, assuming your link has class="color-change-button":

document.querySelector('.color-change-button').addEventListener('click', function() {
    this.classList.toggle('light');
});

https://jsfiddle.net/DTcHh/27351/