CODEWITHSUNDEEP
jqueryhtmlcsscss-selectors
ذیشان ساجد
ذیشان ساجد

Reputation: 45

CSS priority over important?

I have frontend of a site where the another programmer used inline !important tag somewhere is lot of php files so I cannot track it to change the padding size. I'm left with frontend custom stylesheet to replace that one with !important. But it is already !important. How to change it?

Original HTML & CSS:

<ul class="the_champ_facebook_share" style="padding: 7.35px 0 !important;"> .... </ul>

I want this one:

.the_champ_facebook_share {
    padding: 0px !important;
}

Upvotes: 3

Views: 406

Answers (4)

johannchopin
johannchopin

Reputation: 14844

Your css is invalid use this one:

.the_champ_facebook_share {
  padding: 0 !important;
}

That will not solve the problem because the inline style is more important. You will definitively need to remove it from the html.

As mentionned by @Phong you will be able to update the style dynamically using javascript. That's definitively not a good practice -> really overkill. Good thing to do would be to search in all your files (very simple with a basic IDE) the word the_champ_facebook_share then remove this inline style.

Upvotes: 2

Nguyễn Văn Phong
Nguyễn Văn Phong

Reputation: 14198

You can use jQuery to achieve it.

However, as @Roko C. Buljan's comment, use !important is not a good way to do. So you just need to inline style without !important like below.

Output enter image description here 

$(".the_champ_facebook_share").attr('style', 'padding: 0px');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="the_champ_facebook_share" style="padding: 7.35px 0 !important;"> <li>123</li> </ul>

Upvotes: 2

Muhammad Naveed
Muhammad Naveed

Reputation: 92

Add id in this ul and then put style into it. Its can override your !important property because id has greater priority then class.

#new_facebook_champ{
padding: 7.35px 0 !important;
}
.the_champ_facebook_share{
padding: 0 !important;
}
<ul class="the_champ_facebook_share" id="new_facebook_champ"> .... </ul>

Upvotes: -1

zubair1024
zubair1024

Reputation: 853

Seems like you have written it wrong, this is how CSS syntax is written:

CSS syntax

Therefore, 


.the_champ_facebook_share {
  padding: 0 !important;
}

Upvotes: 0

Related Questions