test.html
<html>
<head>
<link rel="stylesheet" type="text/html" href="external_1.css"/>
<link rel="stylesheet" type="text/html" href="external_2.css"/>
<link rel="stylesheet" type="text/html" href="local.css"/>
</head>
<body>
<span class="class1 class2">Some text</span>
</body>
external_1.css
.class1 {
color: red;
font-weight: bold;
}
external_2.css
body .class2 {
color: green;
font-style: italic;
}
local.css
body .class2 {
color: remove-property;
}
external_1.css and external_2.css files are external and I can't change those. All I can do is to override them with local.css
My question is: How can I override the class .class2 and remove the property color in a way that the property from .class1 is applied to the span, to in the end the properties on span would be:
{
color: red;
font-weight: bold;
font-style: italic;
}
Edit: I don't know what the property value in .class1 is. Maybe it's dynamic, I shouldn't set color: red; in local.css.
Edit : As you edited in your question, it changes the entire meaning of what you have asked. CSS is not a dynamic language hence it cannot decide on its own or even conditionally of what to pick and what not to. You need to specify the properties for each rule.
Things you should do in such cases is to use CSS Preprocessors which are capable of conditional CSS rules and can nest the rules inside other or you need to change your dirty way of tackling these issues by getting rid of such confusing way of declaring classes.
Or you can use JS at last to tweak up the markup on the run.
This is where specificity comes handy, all you need to do is to write a rule in your local.css file which is more specific than your previous loaded CSS files.
.wrapper span.class1.class2 {
color: red;
}
Demo
Lets assume that you have SOME kind of wrapper element with a class or an id on it, all you need to do is to write a specific selector to override the color of your span element from green to red.
Surely you can use things like !important but I suggest you not to use so because later it will give you more specificity issues so keep it simple and write a specific selector in your local.css stylesheet.
Also whats the great thing about this is that you won't have to worry anymore how your stylesheets are loaded and in what order till you have a specific rule which will override the base ones.
Last but not the least this will target all the span elements having both the classes nested under an element with a class of .wrapper so if you want to be more specific simply address the only span you want to target. Surely you can use nth-child or nth-of-type to select the span precisely.
You have to redefine color. CSS is not dynamic, as you are saying you have no control on both external css. There is no option so you can use external_1.css's .class1 color value. If you try to call external_1.css after external_2.css, still external_2.css class will be preferred because it has deeper element declaration...
body .class2{color:green;}
while in external_1.css only class declaration...
.class1{color:red;}
Related
I am currently trying to change the color of a title by referencing a div's class.
So far I have tried:
.pagetitle-title.heading {
color: purple;
}
<div class="container">
<h1 class="pagetitle-title heading">IT•ONE Method</h1>
</div>
And even:
h1 {
color: purple;
}
As mentioned per my comment, it looks like a classic case of "CSS overwrite". One of the "hacks" to avoid this, is to use the CSS property !important to tell the browser which CSS rule is particularly important, and should not be overwritten.
Example: color: purple !important;
CSS applies the style in the fashion that it is loaded. So if you have 1 CSS file with x rules, and a 2nd CSS file with y rules, and they both target the same elements, then the CSS file that was loaded last will generally overwrite the styles of the one prior.
The order is known as the top-down rule, and is only overwritten by the !important property and in-line CSS. The !Importantproperty will generally overwrite any in-line CSS.
Given the information about the top-down rule, and you have the means to edit the CSS and/or choose the order of how the CSS is loaded, you can make sure that you are able to apply your own CSS rules by having them load as the last included file in your project.
Example:
<head>
<link rel="stylesheet" type="text/css" href="loadedfirst.css">
<link rel="stylesheet" type="text/css" href="loadedsecond.css">'
<link rel="stylesheet" type="text/css" href="loadedlast.css">
</head>
In case these 3 files have rules that applies to the same elements, the loadedlast.css file is the CSS that will overwrite the ones prior, except in the case of the !important property and in-line CSS. By managing the order of your CSS, you can avoid having to resort to such "hacks" as using the !important property.
Check your link "stylesheet" for your CSS
Open you debug console and identify your h2 to see if CSS option are targeted
Try another hexa color code
Add "!important" after touy color code
color: purple!important;
I see your code and it's correct method to modify this color so... Try my checklist first and give us your feedback.
I would avoid adding important as much as I can. I would just go higher up the parents and try to target the div as specific as I can. Instead, I would go
.container h1.pagetitle-title.heading {
color: purple;
}
If that doesn't work only then I would use important.
Let's say I have the following HTML:
<span id="id1" class="class1 class2">This is a test</span>
and if #id1, .class1 and .class2 all have different sets of mutually exclusive CSS rules, which one wins? I have been testing an example and in one case it's choosing (I think) the one that is listed at the bottom of the CSS file, but in another case it seems non-deterministic.
Is there a specific rule in this case?
The basic principle of cascading in CSS is that you have one element, and one or more CSS rules that apply to the same element (because the element matches their selectors). In this process, all applicable styles are computed, with any conflicts resolved (or cascaded), and then, well, applied.
If the rules and their declarations are mutually exclusive, then none of them "wins" over any of the others per se, since there's no conflict to resolve and therefore nothing to override. For example, if you have these rules:
#id1 {
color: red;
}
.class1 {
border-width: 1px;
}
.class2 {
border-style: dashed;
}
Then your element will have red text and a dashed red border that's 1 pixel thick. There are no conflicts, so all of them will combine in effect. (Note that the border is red due to special behavior.)
jsFiddle preview
It's only when you have the same property declared in more than one rule that selector specificity and cascading become relevant, because then you'd need to override values for that same property. In that case, then as already mentioned IDs take precedence over classes and equally-specific rules are applied from the top down; read about selector specificity.
For example, if you have these rules:
#id1 {
color: red;
}
.class1 {
text-decoration: underline;
color: green;
}
.class2 {
text-decoration: none;
color: blue;
}
Then your element will have red text with no decoration, because
the color value in #id1 overrides that in both classes, and
the text-decoration value in .class2 overrides that in .class1.
jsFiddle preview
Remember that all this has to apply to the same element. If you have a parent that only has an ID, with a child that only has a class, then none of this will apply because you're dealing with entirely separate elements. What comes into play instead is inheritance, which is also covered in the document I link to above.
CSS reads up to down, so class2 will win!
More Info
http://css-tricks.com/specifics-on-css-specificity/
ID will take precedence over class.
If an element has same styles defined multiple times using ID, the latter will take precedence over the former except the case that you're using !important
The order of precedence with CSS is as follows:
1. !important
2. Inline styles which defined inside an HTML element
3. Internal styles which defined in the head section
4. External stylesheet which is a link to a sheet (<link rel="stylesheet" type="text/css" href="style.css" />)
5. Browser default
This is easy - the one that is closer and more refined win (just like life)
I.e.
Got a blank sheet then:
Start off with class - apply those (aka class1, class2)
But you know about that individual (id)
And then apply that..
So (if there is a "winner") the id wins
Unless the tag has style in its attributes - That would win
when I put css in <style></style> tags directly in the HTML it trumps any css in a file loaded with:
<link href="foo1.css"rel="stylesheet" type="text/css" />
But I don't want any inline styles in the html. So I moved the css to a file named foo2.css and have:
<link href="foo1.css"rel="stylesheet" type="text/css" />
<link href="foo2.css"rel="stylesheet" type="text/css" />
I also tried:
<link href="foo2.css"rel="stylesheet" type="text/css" />
<link href="foo1.css"rel="stylesheet" type="text/css" />
changing the order. But it doesn't seem to work. How can I tell the browser to treat foo2.css just like it would inline style?
Don't use !important
You will regret it later. Instead, use stronger selectors.
.weakSelector { }
div.strongerSelector { }
#strongSelector { }
div#superStrongSelector { }
html > body > div.wrapper > div.content > section > article > p > a:link#superUltraMegaStrongSelector { }
If you use identical selectors, the stronger selector is the one that appears later in the document.
Use developer tools (hint: hit F12 in any browser) to see what selector is winning, and make your selector stronger.
The "Trace Styles" tab in IE's dev tools is particularly useful for identifying the stronger selector:
Chrome's dev tools will also show you where styles come from, but you sometimes have to scroll around and hunt for it.
And, of course, there's firebug (HTML > Style > Show applied styles) but no more screenshots... you get the idea. ;-)
you put !important before the semicolon in your CSS document
div {
width:100px !important;
}
This will override all CSS including inline.
!important should only be used as a last resort. The real goal should be to increase the specificity of the foo2.css styles because that's how the browser decides which style to use.
Without seeing your code it's impossible to say for sure, but you could likely just add a prefix before every style in foo2.css with a .container class if you have one or if there isn't a consistent container then you could prefix all styles with body so they're more specific than the foo1.css styles, forcing them to be used.
Using !important or a generic prefix isn't the best way to build a new site but if that's the easiest way to remove inline styles the tradeoff is worth it for the huge maintainability improvement while allowing the browser to cache your styles.
If your inlined styles are like:
<section style="text-align: left; width: 50%; float: right;">
blah
</section>
I'd add generic classes in the HTML code:
<section style="txtleft w50 right">
blah
</section>
and matching CSS helper rules:
.txtleft {
text-align: left !important;
}
.w50 {
width: 50%;
}
.w200p {
width: 200px;
}
.right {
float: right !important;
}
No more strict separation of structure and style but it's still way better than inline styles and classes are self-explaining (you see both structure and main styles by reading your HTML code, updating styles is as simple as removing/adding classes in it).
I add !important on .txtleft and .right because the intent is pretty clear: if I add one of these classes, I DO want the relevant instruction to be applied else I wouldn't add it, simple as that. Without !important, any selector more specific than a class (or as specific as a class but written after these rules) would be applied instead of these ones.
.w50 is a different case: by experience, you may need to override width for lesser versions of IE or in #media rules for Responsive Web Design so adding !important would force you into adding it everywhere and you'd back into adding more and more specificity... Meh.
I'm dealing with a real hash of a site, so this is why I'm asking about this absurd question.
I've looked everywhere to find some sort of way to make a class override another class in the HTML class tag to no avail.
I can either do this, try to untie a ton of spaghetti (which I probably won't be allowed to do anyways), or something anyone else can recommend (would be greatly appreciated).
Is this possible?
class="myClass !important"
If not, is there some sort of equivalent?
Please help! Many thanks in advance!
No, that's not possible. You're going to have to iron out the CSS Specificity by yourself I'm afraid.
If you have the ability to change the HTML templates, you can always go in and add a <div id="override"> or something like that to the outer most wrapper of the page to use as the "master" rule in your CSS classes. Then, in the CSS, you can just add that ID before any of the existing classes or ones that you need to modify.
For instance, if you have the following and want to override the .some-class:
<div class="some-class">Bleh.</div>
And the corresponding CSS:
.some-class { color: red; }
You can wrap the whole thing with:
<div id="override">
<div class="some-class">Bleh.</div>
</div>
And add the #override (or whatever you want to name it) before the .some-class and this rule will take precedence over the other:
#override .some-class { color: green; } /* This will override the red color form the other rule */
.some-class { color: red; }
You can't use !important for entire selectors. You need to find the specific rules you want to override, and use !important on each.
You can add more than one class to a selector as follows:
class="myClass myClass2"
Above is what the class attribute would look like on your HTML element.
As far as the CSS goes, define the classes as follows:
.myClass {
color: black;
font-size: 14px;
}
The above is just a sample of some properties you may have.
Defining "myClass2" after "myClass" in your stylesheet will allow the properties from "myClass2" to overrided the matching ones in "myClass":
//This goes below myClass
.myClass2 {
font-size: 16px;
}
As long as "myClass2" is after "myClass", your font will take the size property of '16px;' The value of "myClass" will be overwritten by that of "myClass2". If "myClass2" comes before "myClass", you can use !important to ensure that style is taken over the one defined later:
//This goes above myClass
.myClass2 {
font-size: 16px !important;
}
Hope this helps.
CSS classes are just a group of styles so you can use class instead of inline style tag.
The !important keyword helps you to override a specific style and not working on classes.
So, for example:
Lets say that we have a css rule on every div somewhere in our CSS file
div{border:solid 1px #ff0000;}
And later on we have this rule:
div{background:#000000;}
Every div in our page will be with border and a background if we want to override the div css rules we need to do something like this:
div{background:none !important;border:none !important;/*...ADD YOUR CSS...*/}
you can create a css reset class to reset all the settings that you want and than add your css
Note, this is different than the older question How can I apply CSS on all buttons which are present in that page? because this is an already existing style. So given that a style, which we'll call "standard_label_style" already exists in an included CSS file, what can I do to say that all the labels on this page should have that style short of adding:
class="standard_label_style"
to each and every one? And yes, I know I could apply the styles ex-post-facto with a snippet of jQuery or JavaScript code. I'm just trying to learn how I'm supposed to do it with CSS.
Follow Up
I've gotten several comments that say just use syntax like this .standard_label_style, label... Unfortunately that does nothing like what I want. That would allow me to apply additional rules to the standard_label_style class, as well as rules to labels within this page, but would not allow me to apply that style to all the labels on this page. To see an example of this, here is a stylesheet and html to demonstrate. The label without a class will still not appear in red but that's what I'm hoping to have happen. I want to apply an existing class to all those labels on the page, not just the one with the class and without adding new styling on this page, the existing style should be the only style.
included.css:
.standard_label_style { color: red; }
test.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="included.css">
<style>
.standard_label_style, label { }
</style>
</head>
<body>
<label class="standard_label_style">Test Label</label><br/>
<label>Unclassed Test Label</label>
</body>
</html>
CSS doesn't really work like that.
You can apply a style to all labels directly:
label {
color: Lime;
}
or apply a class to all labels
.labelClass {
color: Lime;
}
<label class="labelClass"></label>
You can also have multiple selectors, so you could ammend your current style to be
.labelClass, label {
color: Lime;
}
What you can't do in standard CSS is something like
label {
.labelClass;
}
The good news is that there are a bunch of server side libraries which make CSS suck less and let you do exactly this kind of thing, see for example dotLess if you're using .NET which provides nested rules and a basic inheratance model.
To apply a style to every label on the page, use this CSS:
label {
/* styles... */
}
If you have an existing style (e.g. "standard_label_style") in the CSS already, you can apply that to every label:
.standard_label_style, label {
/* styles... */
}
This will affect every label through the site, so use with caution!
In your css file, can't you just put
.standard_label_style, label
{
//styles
}
.standard_label_style, label {
/* stuff */
}
I'm not sure you can... one possible workaround (feels a bit hackish though) is to attach the style to your body tag, then change the css to be this:
body.standard_label_style label{
//Your styles here
}
One of the most underused CSS tricks of all time: Give your bodies an id or class!
HTML:
<body id="standard_label_style">
<label>Hey!</label>
</body>
CSS:
#standard_label_style label{
the styles
}
will take the styles, while
HTML:
<body id="custom_label_style">
<label>Custom!</label>
</body>
Will not.
You are dealing here with CSS precedence. Declarations which are "more vague" (body tag, classes) are applied before declarations which are "less vague" (specific elements, inline CSS).
Thus your answer depends on how the stylesheet is defining label styles. If for example it says label {...}, then that's fairly specific, and your best bet is to use a more specific CSS style, see:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ (good tutorial?)
CSS precedence
The level of "specificity" you need to override, as I said, depend on how specific your other stylesheet was. According to the link, "CSS embedded in the html always come after external stylesheets regardless of the order in the html".
There is also a chance that if you yourself define label {your custom css} that should work, if you import your stylesheet afterwards. It is what I would try first to see if it works. Have you tried this? What was the result?
Note that if you want to completely override the other stylesheet, you will need to also reset any CSS you are not using by settings its values to inherit or as appropriate.