• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / jQuery / Using jQuery to Add CSS Important Style

Using jQuery to Add CSS Important Style

August 5, 2022 Leave a Comment

There are a couple of ways we can use jQuery to add a CSS style as important. The best way we have found is to simply create a class that has the style with the !important property, and then add that class using the jQuery addClass() method.

<style>
.permanent-red {
 color: red !important; 
}
</style>
$(".p1").addClass("permanent-red");

Let’s see this in action below.


Let’s say we have the following HTML:

<style>.p1 { color: blue; font-weight: bold; }</style>
<div id="div1">
  <p class="p1">This is a paragraph.</p>
</div>

Here is the code for you to see:

This is a paragraph.

Now let’s use our code from above to change the color of the text to red using the !important property and jQuery.

Here is our new HTML. It just has a new class, permanent-red, in the style section.

<style>.permanent-red { color: red !important; } .p1 { color: blue; font-weight: bold; }</style>
<div id="div1">
  <p class="p1">This is a paragraph.</p>
</div>

And here is the jQuery code:

$(".p1").addClass("permanent-red");

Here would be the result:

This is a paragraph.

If you are using WordPress, don’t forget to change the $ to jQuery as below:

jQuery(".p1").addClass("permanent-red");

Note that we can also do this just using pure JavaScript.

There is also a way we can add a new style and update it all using jQuery.

jQuery CSS Important – Updating CSS Style and HTML All in jQuery

In this example, instead of updating the CSS style section and adding a new class to it, we will create the class using jQuery and add it to our HTML.

We will do this by creating a new style tag with our class in it, and adding it to the head section of our document using the jQuery appendTo() method.

Here is the jQuery code to do this:

$("<style>.permanent-orange { color: orange !important; }</style>").appendTo("head");

$(".p3").addClass("permanent-orange");

So here is our HTML code again with a new class name:

<style>.p3 { color: blue; font-weight: bold; }</style>
<div id="div1">
  <p class="p3">This is a paragraph.</p>
</div>

Here is the code for you to see:

This is a paragraph.

And this is what happens when we apply our jQuery code from above:

This is a paragraph.

Let’s take a look at one final way that we can use jQuery CSS important that we don’t really recommend.

Adding a CSS !important property using the jQuery attr() method

Another way we can easily use jQuery to add a CSS style as !important, is by using the jQuery attr() method and targeting the style attribute.

We don’t recommend this because doing it this way will get rid of any other in-line styles the element might have. We have included it though because it is an easy way to add a style to an element if it has no other inline styles attached to it.

So here is our HTML again with inline styles this time:

<div id="div1">
  <p class="p5" style="color: blue; font-weight: bold;">This is a paragraph.</p>
</div>

Here is the code for you to see:

This is a paragraph.

And here is our simple jQuery code using the attr() method:

$(".p5").attr("style", "color: red !important");

And this is what happens when we apply our jQuery code from above:

This is a paragraph.

As you can see in this example, the text used to have a bold style attached to it, but this has been overwritten using the jQuery code.

Hopefully this article has been useful for you to understand how to use jQuery to add a CSS style as important.

Other Articles You'll Also Like:

  • 1.  How to Use jQuery to Remove Element
  • 2.  jQuery slideDown – How to Slide Down and Show an Element Using jQuery
  • 3.  Using jQuery to Wait 1 Second Before Executing Code
  • 4.  Get the Height of a Div Using jQuery
  • 5.  How to Uncheck All Checkboxes in jQuery
  • 6.  Using jQuery to Remove Attribute from HTML Element
  • 7.  Using jQuery to Change the Id of a Div
  • 8.  Using jQuery to Toggle Class of HTML Element
  • 9.  jQuery insertAfter – Insert Element After Another Element
  • 10.  Using jQuery to Empty the Contents of an HTML Element

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy