I have apply a classname "bSelect" to a Link element, it could apply background image but not converting the link into white?
.bSelect {background:url('../../img_assets/bs1.png') 0 0 no-repeat;background-position:center;color:#fff;}
The most specific rule will always apply, so if you have the following somewhere:
a.bSelect { color: red; }
Then it will always take presidence over a less-specific rule, like:
.bSelect { color: white; }
Adding "!important" to the end of the rule forces it to be applied (though again, if you have multiple "!important"s, the most specific wins again).
It's usually a good idea to try and avoid "!important" and instead figure out why the rule isn't being applied. There ae built-in tools in most browsers to help you trace which CSS styles are being applied. However, "!important" works and is often easier than trying to rewrite CSS rules to make them work.
Related
In my CSS, I have this:
b {
color: Red;
}
And in my body:
<b>Hello world!</b>
As a result, I get "Hello world!" text that is red in color.
However, as I add more classes:
.myClass {
color: Blue;
}
.green {
color: Green;
}
And I modify my body:
<b>H<a class="myClass">ell</a><a class="green">o</a> wo<a style="color: Black;">rl</a>d
I will not get the same result as earlier.
Is there a way to strictly set a CSS style? Which means that with the above code I wish to get "Hello world!" text that is red.
Thanks
This is a question of CSS Specificicty
The concept: Specificity is the means by which a browser decides which
property values are the most relevant to an element and gets to be
applied. Specificity is only based on the matching rules which are
composed of selectors of different sorts.
Inline styles override external CSS, and class selectors override element level selectors.
The following list of selectors is by increasing specificity:
Universal selectors
Type selectors <--- your b CSS
Class selectors <---- your .xyz CSS
Attributes selectors
Pseudo-classes
ID selectors
Inline style <--- your style=''
If you wish to override specificity, you can use !important after the rule in question, e.g.:
b {
color: Red !important;
}
However, this is not recommended, instead you should write 'better' rules (more specific) to target your HTML as appropriate. This ensures you end up with better structured code, the issue with !important being it can lead to unforeseen circumstances where rules aren't working because you may have forgot you had previously overridden them.
Again, from MDN:
The !important exception
When an !important rule is used on a style declaration, this
declaration overrides any other declaration made in the CSS, wherever
it is in the declaration list. Although, !important has nothing to do
with specificity. Using !important is bad practice because it makes
debugging hard since you break the natural cascading in your
stylesheets.
Some rules of thumb
Never use !important on site-wide css. Only use !important on
page-specific css that overrides site-wide or foreign css (from ExtJs
or YUI for example). Never use !important when you're writing a
plugin/mashup. Always look for a way to use specificity before even
considering !important
With the markup that you provided, no. Otherwise, maybe
The inline style has priority over the stylesheet so part of the text will be black no matter what. You might be able to create a rule that has enough specificity that it will take precendence over any other rules.
b, b .myClass, b .green {
color: red;
}
Though this can get troublesome to maintain. And there is still a chance that a different css rule will get higher precedence later on. I am not completely sure that even specifying all the children with * will do it.
You seem to be asking whether you can set a property (color in the example) on an element in a manner that will not be overridden by settings on inner elements.
You cannot do that with settings on the element itself. But you can set a property on an element and all of its descendants:
b, b * {
color: Red !important;
}
This will override any normal settings for color on inner elements. But it is ineffective against, say, .green { color: Green !important; }. To defeat that, you would need a more specific selector, such as b .green, for your rule—so there is no general way to achieve that (i.e., a way that is independent of the specific markup used inside the element).
I am trying to use .less to modify a Joomla Gantry template. The text I'm trying to change with the "aa" class has linked audio, so the whole text shows up in blue color, which I am trying to change to dark brown. Here what I'm working with in my .less file:
.aa {
cursor: url(/images/listen.cur), progress !important;
color: #2E1507;
}
It's very simple, but I couldn't make the cursor change before without "progress !important", which doesn't make sense to me.
Now I am trying to change the color, but I can't find a way. Is there something important that I'm missing in trying to change these styles?
I think #seven-phases-max provide you the right answer in the first place. !important in LESS has the same meaning as in CSS. You will use !important to overrule the CSS specificity rules. In most cases it is not a good idea to use !important, try to find the a selector with a higher specificity instead. Read also: http://css-tricks.com/when-using-important-is-the-right-choice/. One reason to use !important mentioned here will be utility classes. Maybe this is why you choose to use it here too.
progress sets your cursor type, see http://www.w3schools.com/cssref/pr_class_cursor.asp. Cause you already use a url() for this, progress should not have any effect (auto is the default style).
Note if you need !important to set your cursor, you probably also will need it to set your color: color: #2E1507 !important;
When using a mixin in LESS you can set the !important; for all your properties once like:
.importantaudio(){
cursor: url(/images/listen.cur), progress;
color: #2E1507;
}
.aa{ .importantaudio() !important;}
CSS (result):
.aa {
cursor: url(/images/listen.cur), progress !important;
color: #2E1507 !important;
}
Suppose I have some html like this -:
<div style="blah...blah">Hey Nice</div>
<a style="blah...blah">Great</a>
How do I remove all the inline styling applied to the above elements in my stylesheet considering I don't know what all inline styling exists.
Currently I am trying this, but in vain -:
div[style], a[style]{ !important }
You must reset all css properties for elements that have style attribute:
[style] {
position: static !important;
float: none !important;
border: 0 none !important;
margin: 0 !important;
padding: 0 !important;
outline: 0 none !important;
// and so on
}
There are several determining factors determining which CSS property prevails in any situation. In order, these are:
Whether the property value has the !important flag or not.
If the style declaration is applied inline via the style attribute.
The strength of the CSS rule selector
If the rule has any ID clauses, and if so how many
If the rule has class, attribute or pseudo-class clauses, and if so how many
If the rule has any tagname clauses, and if so how many
If the property is parsed later in the source than another property with a rule of the same strength
So the only way to override the properties is to make sure that all the properties applied via style are applied elsewhere in your stylesheet, and have the !important declaration. The most rational way to do this is still very awkward — it would involve applying a very specific reset stylesheet, and including !important on every property on every rule.
But even if this is done, you still couldn't override inline style declarations that have !important themselves.
You've told Mojtaba that there should be a better solution, but that better solution would involve designing CSS to break its own rules. Imagine if there was a simpler solution for overriding inline styles from stylesheets designed into the language of CSS — should there also be another solution for simply overriding the override from inline styles? Where does the cycle end? All in all, I'd recommend using Javascript or giving up. Or describing your specific problem in more detail — there may be another solution!
If you're not happy with using !important overwrites in the CSS (as suggested by others on here), the only way would be to use JavaScript to remove the styles.
This is really easy in jQuery (better if you're able to assign a class name to the elements to select it with):
$('.selector').attr('style', '');
This will simply replace the element's 'style' attribute with nothing, thus removing the inline styles.
This isn't ideal though since it will rely on the visitor having JavaScript enabled, and may well result in the visitor seeing a style 'flash' as the page loads: the styles assigned in-line to the element before the JS kicks in and removes it.
Can anybody explain what in reality do !important in css styles?
I when i lok on other site css sometimes they use it, but why? I'm not realy understending the !important "job" :D
Thank You...
The !important rule is a way to make your CSS cascade but also have the rules you
feel are most crucial always be applied. A rule that has the !important property
will always be applied no matter where that rule appears in the CSS document.
So if you wanted to make sure that a property always applied, you would add the !important property
to the tag.
So, to make the paragraph text always red, in the above example, you would write:
p { color: #ff0000 !important; }
p { color: #000000; }
Using !important in your CSS usually means you're narcissistic & selfish or lazy. Respect the devs to come...
More about this
More about this link 2
!important is a part of CSS1.
What is it?
!important overrides other styles that don't have it. Here is a basic order of priority for CSS:
Rules with !important
More specific rules
.classNameA .classNameB {} /* more specific */
.classNameB {}
The order of the rules
.classNameB {}
.classNameB {} /* takes priority */
Example
.classNameB .classNameA {
background-color: red;
}
.classNameA {
background-color: blue !important;
}
Despite .classNameA being more specific in the first rule, the background-color of .classNameA is blue because of !important.
Should you use it?
No, avoid it at all costs. Only ever use it if it's absolutely necessary and if you find yourself in a situation where it is, consider refactoring your CSS. The reason for this is because it's difficult to change your CSS when you have !important rules all over the place. It's also an indicator of bad CSS design.
Further reading
Smashing magazine - !important CSS Declarations: How and When to Use Them
CSS Tricks - When Using !important is The Right Choice
!important sets the priority on the css atributes. If you have two same CSS properties with some different values, one !important mark will set that priority as HIGH.
Normally, latter CSS declarations overrule earlier. So if you have declared, in the style sheet, a certain background color for a certain element, and the style block on the page itself, or an inline style, declares another background color for that element, the style block or inline style overrules the style sheet.
If you add !important to the declaration in the style sheet, that declaration is not overruled.
I have lots of CSS files on my current project, and a lot of the styles in these files have !important besides them. A feeling inside me tells me that this is not a good thing. Can someone shed some light on what happens when we use !important and whether it is a good idea or not.
thanks,
Sachin
!important means the rule cannot be overridden. Take note that user stylesheets using !important will override author stylesheets.
http://www.w3.org/TR/CSS21/cascade.html#important-rules
Whether this is bad or good really depends on the usage. I don't use this keyword often myself. One example is that it allows me to override styles pulled in from 3rd party widgets/plugins.
!important gives a style precedence and will ensure (where it can) that it is the style used. If you are using !important because your selectors just aren't specific, or well thought out, enough, then that's not the way they should be used. For me, there more useful for when you may have to deal with styles you have no control over.
To illustrate, where you might want to use `!important, you might have two stylesheets. One 'global' , that you have control over and one 'local', that you do.
In the global stylesheet, you might have the following:
p span {
color: black;
}
In the local one, you could override this by doing:
p span {
color: red;
}
This might work, but if the local one is included before the global one, there will be a conflict and the global styles will take precedence. To overcome this, you can do:
color: red!important;
In the case where you could just be more specific with your selectors, it would be better to do that, rather than use !important.
Global, all spans are black:
span {
color: black;
}
In local, spans inside paragraphs are red:
p span {
color: red;
}
There's nothing 'wrong' with using !important really, I guess it's a case by case scenario, but hopefully the above explains how to make the best use of them.
Some more discussion on 'When using !important is the right choice' over on CSS tricks.