Can a block of CSS code be made non-functioning with !important?

Question

I am working in Joomla and the CSS that comes with a third-party has the following CSS code that is causing a conflict and I was told to have it removed:

[class*="span"] {
     float: left;
     margin-left: 20px;
     min-height: 1px;
}

I don't want to remove this from the "core" of the third-party component because when an update comes in, it will overwrite this. I normally put in CSS I want to override in the template's custom.css file with !important and that has worked.

Is there a way, perhaps using !important to do the equivalent of removing the above block of CSS code so it doesn't function? I'm not a CSS expert, but is there a way of putting this in the custom.css that would make this CSS block non-functioning so it doesn't interfere? Thanks!

score 0 · Answer 1 · answered Dec 07 '13 at 14:46

Yes

[class*="span"] {
     float: none !important;
     margin-left: none !important;
     min-height: none !important;
}

But, unless there's a JS plugin loading that CSS on page load, there's no need. Include your CSS after the third-party's version, which you should always do anyway.

[class*="span"] {
     float: none;
     margin-left: none;
     min-height: none;
}

Example HTML

<link href="/css/joomla.css" rel="stylesheet" />
<link href="/css/third-party.css" rel="stylesheet" />
<link href="/css/custom.css" rel="stylesheet" />

custom.css rules will override third-party.css rules.

Ankit Vijay · Answer 2 · 2013-12-07T14:59:41.910

0

One way I would do it to give CSS class to my body. Say "myCustomClass" then.. override the above class as follows:

.mycustomclass [class*="span] {
        add properties
 }

Example: http://jsfiddle.net/ankitvijay/n4Enb/

edited Dec 07 '13 at 14:59

answered Dec 07 '13 at 14:51

Ankit Vijay

3,752
4
30
53

Wouldn't that require modifying the core of the third-party vendor's CSS to define .mycustomclass to make that work? – Edward Dec 07 '13 at 14:57
You don't need to. You can have your own custom style sheet for that. The advantage is you can use the class whichever page you like. – Ankit Vijay Dec 07 '13 at 15:01
As I mentioned, I'm not a CSS expert. So .mycustomclass is overwriting the function of what "[class*="span]..." does? – Edward Dec 07 '13 at 15:02
Yes, Exactly. If you need it to a specific span then other way to achieve this is: http://jsfiddle.net/ankitvijay/7P6Ek/1/ – Ankit Vijay Dec 07 '13 at 15:16

Can a block of CSS code be made non-functioning with !important?

2 Answers2