ADVERTISEMENT
ADVERTISEMENT

How to apply !important using .css()?

CSS !important Property: Here, we are going to learn how to apply !important using .css()?
Submitted by Apurva Mathur, on May 21, 2022

Before jumping to the main topic let's see how priority works when applying CSS? CSS has some fixed priority, and when we apply any styling it gives the output according to the priority set. This priority is set according to the type of selector used while styling.

Selector: CSS selectors are used to select the content we want to style. CSS selectors select HTML elements according to its id, class, type, attribute etc.

CSS selector priority:

  • <Style> tag: Priority level 1
  • #id name: Priority level 2
  • .class name: Priority level 3
  • Tag-name: Priority level 4 (tag name here refers to any tag like <p>,<h1>etc)

So whenever we apply any CSS by these selectors so it will act according to the priority.

Example:

Suppose if I use class name and tag name both on one heading with same CSS color property so it will give the output specified in the class name.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
   </head>
   <style>
      .Paragraph{
      color: red;
      }
      p{
      color: yellow;
      }
   </style>
   <body>
      <p class="Paragraph">
         *************************************************************************<br><br>
         THIS WILL CHANGE ACCORDING TO THE PROPERTY APPLIED IN THE CLASS SELECTOR<br><br>
         *************************************************************************<br><br>
      </p>
   </body>
</html>

Output:

Example | !important using .css()

Similarly if I will use id and class name both in one paragraph with same CSS color property so it will give the result according to the property applied via id selector.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
   </head>
   <style>
      #Paragraph{
      color: deeppink;
      font-size: 20px;
      font-family: "Baskerville Old Face";
      font-weight: bold;
      }
      .p{
      color: yellow;
      font-size: 60px;
      font-family: "Blackadder ITC";
      }
   </style>
   <body>
      <p id="Paragraph" class="p">
         *************************************************************************<br><br>
         THIS WILL CHANGE ACCORDING TO THE PROPERTY APPLIED IN THE ID SELECTOR<br><br>
         *************************************************************************<br><br>
      </p>
   </body>
</html>

Output:

Example 2 | !important using .css()

But what if I want that class should be given priority first so in the case where you want to assign property on the specified selector irrespective of its priority in CSS, !important comes in the picture. This basically takes all the attention, doesn't matter on which it is applied and what priority that selector has.

For example:

We saw in above example that Id selector was given the priority when used with class selector, now if I want to set the property according to class selector then I will just simply write !important with the property defined.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
   </head>
   <style>
      #Paragraph{
      color: deeppink;
      font-size: 20px;
      font-family: "Baskerville Old Face";
      font-weight: bold;
      }
      .p{
      color: lightseagreen !important;
      font-size: 20px !important;
      font-family: "Arial Rounded MT Bold" !important;
      }
   </style>
   <body>
      <p id="Paragraph" class="p">
         *************************************************************************<br><br>
         NOW THIS WILL CHANGE ACCORDING TO THE PROPERTY APPLIED IN THE CLASS SELECTOR<br><br>
         *************************************************************************<br><br>
      </p>
   </body>
</html>

Output:

Example 3 | !important using .css()

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.