Lets say you have a global CSS of:
span {color: purple;}
Now take this line of code:
<h1><span>Hi</span></h1>
Is there a way to INLINE exclude it?
I obviously can do this through stylesheets or jquery, but my particular use case would need to basically say, I am just a regular tag, don't apply any global css span style to me.
Is that even possible?
I'm quiet sure that there's no way exclude that element based on its parent, however you could override the applied color - for instance - by using inherit value (or any other value you want):
Example Here
h1 span { color: inherit; }
So that the nested <span> inherits the color from its parent, the <h1>. It is supposed to work on IE 8+.
6.2.1 The 'inherit' value
Each property may also have a cascaded value of 'inherit', which means
that, for a given element, the property takes the same specified value
as the property for the element's parent. The 'inherit' value can be
used to enforce inheritance of values, and it can also be used on
properties that are not normally inherited.
Related
I originally noticed this problem when working with CSS in an SVG file, and thought it was rendering error, but after trying it in HTML, the same situation occurred.
Take the following code:
.example {color:green}
.example {color:blue}
In this case, as expected using normal class selectors, the value of color is initially green, though later in the file it is redefined as blue, thus the resulting color of elements in the class are blue.
Now take this example:
div[class='example'] {color:green}
.example {color:blue}
In this case, now initially defining the color value for divs in example using attribute selectors, when the value is redefined using normal CSS class selectors, the change from green to blue is ignored in the divs, and the value set by the attribute selector takes precedence, despite the blue color value for the whole class being redeclared later in the file.
According to Mozilla documentation on CSS class selectors, it says normal selectors and attribute selectors are "equivalent", though that doesn't appear to be the case in this situation. What is the cause of this?
I'd originally posted this as a comment, but perhaps I should've made it answer.
Let's look at the actual conditions of your two CSS rules:
div[class='example'] {color:green}
Element must be a <div>
Element must have class "example"
.example {color:blue}
Element must have class "example"
Because your first CSS rule has two conditions, whereas your second rule only has one, the first rule is more specific - therefore it will take precedence.
If you were to remove the div portion from your first rule, it would be considered equivalent (as MDN states), at which point the text would be blue.
Mozilla documentation is correct.
But when considering specificity, you need to take in to the account div and [class='example'].
These two combined are stronger than .example.
Here is an nice representation of specificity:
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
If you go and open smasingmagazine.com articele, you will conclude that:
.example has power of 10
Whereas div[class='example'] has power of 11
I have a very bad CSS rule (high specifity, use of !important) which sets color of text in a paragraph:
#wrapper .article .text {
color: green !important;
}
Then I put a simple span element in that paragraph and set color of the span text via simple class:
.black {
font-weight: bold;
color: black;
}
How come, that this simple class with low specifity and no !important flag overrides the parent rule?
Full snippet on codepen.io here: http://codepen.io/Jarino/pen/oXYeQZ?editors=110
This is simply because there is no more specific rule for that <span> than what you have declared in .black. Even though it is a child element of the <p> that has an important! flagged rule, it only inherits the color from it if it can find no more specific other color definition. Inheritance from a parent context is the least specific "rule" possible. Also, the !important part of a rule is not inherited, afaik.
If this were not the case, you would be very commonly forced to either use !importantwhenever an element takes a style that it already inherited from the parent, or you would have to constantly use very long selectors to make sure your child element selector does not have a lower specificity than the definition it inherits.
Also, compare what Mozilla says on the subject:
Styles for a directly targeted element will always take precedence
over inherited styles, regardless of the specificity of the inherited
rule.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#directly-targeted-elements
The high-specificity rule applies only to the parent class. When it comes to it's children, the high-specificity of the parent class mellows down to a parent style that is inherited by the child.
And, when it comes to styling the child, all CSS rules specifically targeting it get precedence over the high-specificity rule of the parent.
If you do 'Inspect Element' for this child span tag in the Developer Console of your browser, you'll see how preference is given to CSS rules targeting that particular element that overrides all the parent styling that appears way down the list.
if you don't want your .black class to override the parent rule you can simply remove the color property from your .black class, the class mentioned in span will always have high specificity regardless of parent rule.
Because !important applies only for current element style not for child elements with specified same property.
How come, that this simple class with low specifity and no !important
flag overrides the parent rule?
Well, because they are two different rules.
You have your text class which is pretty strictly called but only a class without selector.
After you addded a span with a different class it will not be overwritten, because it's another rule. It gets applied to the span. And .text get applied to the paragraph.
I have the following problem:
I get a generated HTML with dynamic content. The IDs and the html tag-hierarchy is always the same. I can set a stylesheet.
I tried to set the color of the text to red. If I set it on this position where it's done in the screenshot it does not work. If I set it inline in the table below (table cols=2 border=0...) it works.
Is there a depth limit for CSS ? How can I set the color for the whole text containing the div (id=15B_gr or id=oReportCell) ?
++UPDATE++
I tried to set a stylesheet, but it does not work:
You should be able to target all the children of a div by using an asterisk. In this case:
#15B_gr * {
color:red;
}
or you could set it on just the elements:
#15B_gr span {
color:red;
}
** Edit for further information **
As pointed out by #nico o, some complications can arise due to having a number as the first character in the ID. Previous versions of the HTML spec did not allow IDs to begin with a number.
http://w3c.github.io/html-reference/datatypes.html#common.data.id
Maybe you have a rule (in another stylesheet?) which has a selector which has the elements class that you want to style but additionally the class name of an element of a parent or grandparent element. In this case that specific style would outweight your style.
In this case you could add an "!important" to your rule (color: red !important; ) ...
or you could add the selectors of the other stylesheets style to yours too so that that style doesn't outweight your's anymore.
You should "inspect" the element! (Rightclick on it, "inspect element") to find the active and overwritten rules for that specific element! You find those info in the lower right corner of the "inspector"-Window wich then opens. Along with the currently active styles you there find the stylesheet in which the styles are defined.
Assume a body node having a child node (e.g. div).
There may be css styles attached to the body, which are not known in advance (they are specific to an arbitrary page accessible on the WWW).
The child node (e.g. div) has a bunch of css styles which are static.
How to prevent css styles of the parent to "influence" styling of the child?
There is no generic way. You need to set a value (other than inherit) for every property that has inherit as the default value.
Even that won't prevent all influence.
e.g.
body { width: 300px; }
div { width: auto; }
The width of the div is influenced by the width of the body.
You could use values initial (compatibility: not supported by IE at all) and unset (Fx27+ only)
The initial CSS keyword applies the initial value of a property to an element. It is allowed on every CSS property and causes the element for which it is specified to use the initial value of the property.
where initial value means:
The initial value given in the summary of the definition of each CSS property has different meaning for inherited and non-inherited properties.
For inherited properties, the initial value is used, for the root element only, when no value is specified for the element.
For non-inherited properties the initial value is used, for any element, when no value is specified for the element.
Source for links and quotes: MDN
Relevant polyfill: https://stackoverflow.com/a/15903168/137626 (brace yourself)
You could reset all properties to desired defaults in the child div like this.
div *{
property1:default;
....
propertyx:deafult;
}
Is there any way to disable one CSS property value only? For example, with the property 'text-decoration' there are possible values of none, underline, overline, line-through, blink and inherit.
I would like to allow all values of text-decoration with the exception of underline on ALL elements.
The pages I'm working with are dynamically generated, and can have content from all over the web- so it's not possible to target any specific element. Using text decoration 'none' works of course, but it blows away all other values as well :(
Suggestions?
There's no way to do this with just CSS and HTML. What you'd need is something like a property selector to target all of the elements on your page with text-decoration set to underline, but such a thing doesn't exist right now.
However, if JavaScript is an option, then you could accomplish this. You would first determine the style of the elements and then, if you needed to, set the style to get rid of the underline.
Since there's no such thing as property selectors in Javascript and neither JQuery, You should get all of possible elements and then check for their css property and change it if needed. Something like this:
$('*').each(function() {
if ($(this).css('PROPERTY') == 'FORBIDDEN-VALUE') {
$(this).css('PROPERTY', 'REPLACE-VALUE');
}
});