Overwride CSS Class

The properties of a second class will override those already set. There is no need to use !important here.

For example:

.red { background-color: red; }
.background-none { background: none; }


<a class="red background-none" href="#carousel">...</a>


Credits: https://stackoverflow.com/questions/20954715/how-to-override-the-properties-of-a-css-class-using-another-css-class#20955958



Use jQuery to select current menu item in css

 This tip is great for use with Joomla and mmenu.

@micha149 has shown me this jQuery snippet which will catch all absolute and relative URLs.

var url = window.location.href;  // Will only work if string in href matches with location 
$('.menu a[href="'+ url +'"]').addClass('active'); 
 // Will also work for relative and absolute hrefs

$('.menu a').filter(function() { 
return this.href == url; 




How to swap CSS class names without touching the CSS codes


This technique might be very useful for this that deal with templates where the CSS themes may be overridden but you wish to keep certain classes references even when the template undergoes versioning.




 You can set the class (regardless of what it was) by using .attr(), like this:


If you want to add a class, use .addclass() instead, like this:


Or a short way to swap classes using .toggleClass():

$("#td_id").toggleClass('change_me newClass');

Here’s the full list of jQuery methods specifically for the class attribute.



Apply to entire document when you do not have an ID selector


$(document).ready(function(){ $('.blue').removeClass('blue').addClass('green');});