This is more of a theoretical question.
Is the stack of overrides for CSS ad-infinitum? For instance, is there always a CSS override for every override?
Lets say I have written this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.a {
color: red;
}
/* Override it again */
div.a {
color: blue;
}
/* Again! */
body div.a {
color: yellow;
}
/* Again!! :) */
html body div.a {
color: yellow;
}
/* AND AGAIN!! */
html body div.a {
color: pink !important;
}
</style>
</head>
<body>
<div class="a">a</div>
</body>
</html>
Is !important combined with html body div.a the absolute highest level override for div.a?
Must there always exist something with a higher override?
In theory you can simply repeat a rule to increase the specificity.
.foo.foo.foo { }
In practise, browsers eventually treat a selector as having too many components and ignore it.
(There is also the style attribute, which is more specific than any selector)
inline styling with !important applied is the highest override I've ever used.
Example:
<div class="a" style="color: blue !important">a</div> Will override all other css applied
If you declare an inline style rule for div.a with the !important declaration it'll still override the rule declared in the <style> tag.
Any inline rule generally over-qualifies internally or externally declared styles, regardless of the number of selectors used to specify that rule. The only time an inline rule is over-qualified by internal or external styles is when the !important declaration is used - but if that declaration is used on an inline style you want to overwrite you'll be cursing.
In this case you'd need to apply some javascript to reset the attribute.
Related
I have main.css file where I define standard size for inputs:
/* Describe general input element sizes */
input[type="text"], input[type="password"]
{
width: 180px;
border: 1px solid #aaa;
}
This CSS referred in header of the page. Later in page I define following:
<style>
.shortField {
width: 50px;
}
</style>
I assign class "shortField" to my input box but size is not applied. F12 screenshot:
The specificity of the first selector is 0-0-1-1, the second selector's specificty is 0-0-1-0, which means the first selector will override the second.
To override the initial selector, you only need to match the original specificity, as the second selector is later in the cascade.
The following selector should be enough to override the match with input[type="text"], I've listed .shortField twice so that it will continue to match cases where it was used on non input elements.
.shortField,
input.shortField {
width: 50px;
}
An alternative would be:
body .shortField {
width: 50px;
}
Be very careful when raising the specificity of selectors. It's very easy to get into specificity games where you end up writing nonsensical styles like:
#foo #bar #baz #fizz #buzz .lorem .ipsum ul li a {
margin-left: 0 !important;
}
Try to use the lowest specificty selectors that you possibly can.
You need to learn about specificity...
The least specific stylesheet is what you link (External file)
They styles you declared between document head tag is more specific than an external stylesheet
And last but not the least, inline styles are MOST specific
And so in order to over ride, use !important(Don't use it if you don't know what it does and how it works) declaration or use more specific CSS selector like the one below
input[type=text].shortField { /* This is more specific than simple element selector */
/* Styles */
}
It is because the styles in your main.css file are more specific than in your html head.
If you really need to override it try doing this:
.shortfield {width: 50px !important;}
Might help you to understand the hierarchy of importance for CSS.
Inline > Embedded > External
Inline styles are anything within style="" and override any styles specified from embedded, or external stylesheets.
Embedded styles are styles within <style> within the <head> of the document. They are overridden by inline, but override external.
External styles are written in external files, and are overridden by either embedded or inline.
My theory is that you have styles overriding your external stylesheet.
For example:
You have this:
<style type="text/css">
.myrule {
font-weight:bold;
}
</style>
<div class="myrule">
This text will bold but
</div>
<style type="text/css">
.myrule {
font-weight:normal; /* This code will affect the original .myrule */
}
</style>
What I need to know if is possible to "lock" CSS rules like this example:
<style type="text/css">
.myrule:locked {
color:yellow;
}
</style>
<div class="myrule">
This text will yellow always!!!!!!!
</div>
<style type="text/css">
.myrule {
color:red;
}
</style>
Not necessarily. You can use the !important operator to add an extreme weight to the CSS rule that will override pretty much anything else. However, another rule that is more specific that also has the !important operator will still override it.
Your best bet is not to try and "lock" CSS rules, per say, but to actually make sure that the rule's selector is always more specific than others. An ID selector is a great way to dominate specificity, and you will run into far fewer problems this way.
Try this :
.myrule {
font-weight:bold !important;
}
If it is possible to define an ID for your DIV tag, like
<div class="myrule" id="firstdiv">
This text will yellow always!!!!!!!
</div>
then you can specify your id specific CSS rule, like
<style type="text/css">
#firstdiv .myrule {
color:yellow;
}
</style>
I think css interpretation differs by browser. If you want to override css precedence, I think you need to use javascript to explicitly state your intent.
This question already has answers here:
How to override !important?
(12 answers)
Closed 2 years ago.
What I am trying is setting this CSS on element:
background: red !important;
But when I try to do this:
background: yellow;
it still only shows the red and not the yellow for that one field as I would like it to be (I am not using external CSS).
What I am asking is how to override it, is it possible?
Ans is YES !important can be overridden but you can not override !important by a normal declaration. It has to be higher specificity than all other declarations.
However it can be overridden with a higher specificity !important declaration.
This code snippet in Firefox's parser will explain how it works:
if (HasImportantBit(aPropID)) {
// When parsing a declaration block, an !important declaration
// is not overwritten by an ordinary declaration of the same
// property later in the block. However, CSSOM manipulations
// come through here too, and in that case we do want to
// overwrite the property.
if (!aOverrideImportant) {
aFromBlock.ClearLonghandProperty(aPropID);
return PR_FALSE;
}
changed = PR_TRUE;
ClearImportantBit(aPropID);
}
Good read
Specifics on CSS Specificity
CSS Specificity: Things You Should Know
Here's an example to show how to override CSS
HTML
<div id="hola" class="hola"></div>
CSS
div { height: 100px; width: 100px; }
div { background-color: green !important; }
.hola{ background-color:red !important; }
#hola{ background-color:pink !important;}
and output will be
Also we can not override inline !important
HTML
<div id="demo" class="demo" style="background-color:yellow !important;"></div>
CSS
div { height: 100px; width: 100px; }
div { background-color: green !important; }
.demo{ background-color:red !important; }
#demo{ background-color:pink !important;}
the output is
As described in w3 spec, !important declarations do not alter the specificity, but rather take precedence over "normal" declarations. Effectively, such declarations only "compete" between themselves - thus, you can override yours with another !important declaration of higher specificity:
/*
these below are all higher-specificity selectors and, if both
rules are applicable to the same element, background colour
will be set to "yellow":
*/
.some-class.some-other-class, div.some-class, #some-id {background: yellow !important;}
.some-class {background: red !important;}
There is also the declaration order to consider - a declaration further down in the CSS will take precedence over an earlier one if their selectors have the same specificity.
A case worth noting is when it clashes with an inline declaration. Counterintuitively (but fully in line with the spec), the !important value will come out on top! This means that if you have
<style>
#secret-container {display:none !important;}
</style>
<script>
$('#secret-container').show();//using jQuery etc.
</script>
<div id="secret-container">...</div>
the div in question will remain hidden! The only way to have an inline rule take precedence over an !important one is, well, by applying !important to it as well. I'll let you be the judge of how good a practice that is ಠ_ಠ
There's no overriding inline !important though.
!important will override background: yellow; Try to avoid using !important. Take a look at css specificity. http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
The W3C Recommendations defines the ability to select any anchor which has a defined class by using A[CLASS]{/*Code*/}, but is there an antecedent?
Can I select all anchors that do NOT have a class?
My instinct is to use A[~CLASS]{/*Code*/}, but that isn't documented, and A[CLASS=]{/*Code*/} selects all anchors which have a class name which is an empty string (for instance, <A CLASS="" HREF="http://example.com/">This anchor has a class, but it's empty.</A>).
Example usage
In this code, I only want classless links to be green.
<HTML>
<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="http://example.com/externalUneditableStyles.CSS" />
<STYLE>
A.deadLink{
color:#FF0000 !important;
}
A{
color:#00FF00;
}
</STYLE>
</HEAD>
<BODY>
This link is red, as specified by the CSS above.
This link is green, as specified by the CSS above.
This is a link to a child page, and is styled by external uneditable CSS. That CSS doesn't specify a color, so it is green, even though that might not be the intended effect.
</BODY>
</HTML>
Use something like this:
a:not([class]) {
/*some styling here*/
}
Little demo: little link.
That's exactly what cascading is for, if you do:
a { color: #000; } /* this targets all anchors */
Then after this in your stylesheet you can do
a.classname { color: #ffcc00; } /* to override the color for the once with the classname class defined. */
I hope that's clarifies your question.
Try to play with the .foo:not(.bar)-pseudo selector. I also advise you not to code tags in caps. I believe it is allowed in HTML5, but not in XHTML. Even so, the practice is frowned upon.
i am using a definitive style for my tags. now there is one tag that i do not wish to appear that way. how do i do it?
Give that one tag an ID, and then make a style for that specific ID. It will override the style you set for the "a" tags.
First, figure out the class or id of the element you want to change the style of using tools like firebug. Once you have found its class or id, search for it in the style sheet and modify the style as you like. If it still does not work, try appending the !important to your style, for example:
.myelement
{
color: #ff0000 !important;
font-size: 14px !important;
}
The !important will override any pre-defined styles.
You can't always reliably "unstyle" an element. For some style properties setting the value to auto, default or none will work:
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<style>
a { background: pink; }
a.normal { background: none; }
</style>
</head>
<body>
<p>link1
<p>link2
<p>link3
</body>
</html>
But not for example color. Replace background in above example by color. It won't work. You'll really need to force the color yourself, e.g. color: blue.