I've got a DIV covering the entire document:
<DIV style="position:'fixed';left:'0px';width:'100%';height:'100%';top:'0px',z-index:-20">
The zIndex of -20 is to prevent the DIV from coming up on top of other elements and interfering with mouse events.
However, when the page is busy with an asynchronous request, I want to bring the DIV to the top. My async request function sets the class of a user-defined variable element to "AJaXBusy" and then I style that class however I want. However, in this case, the style of "zIndex:100" isn't working, because the default value of -20 is overriding it!
Here's the code I'm using the show the DIV:
css('.AJaXBusy').backgroundColor="#ffddff"
css('.AJaXBusy').zIndex='100 !important'
(The CSS function returns a style-sheet object style property, it's about 30 lines of code so I have omitted it.)
How do I get a CSS class definition to override the value that has been assigned directly to the element? I've read about specificity and inheritance, but it didn't seem to address effects applicable in the document itself.
If you use JS to set element style (i.e. ele.style.zIndex), then '100 !important' is not a legal value (while '100' is), so the expression silently fails.
However, if you use ele.setAttribute('style', '.....'), then !important could be applied.
And, inline style has much higher previledge than css class, so you cannot override it.
A much better approach would be, if you could edit HTML, use different class definitions.
<style>
.undercover { z-index: -20; }
.cover { z-index: 100; }
</style>
<div class="AJaXBusy undercover">
Then change class name when you want to make it
var ajaxBusy = document.querySelector('.AJaXBusy')
ajaxBusy.classList.remove('undercover')
ajaxBusy.classList.add('cover')
use !important after your declaration.
z-index:100 !important;
As others have said, zIndex is how you update the property in javascript, elsewhere you refer to it as z-index.
I would recommend that instead of using a negative z-index to attempt to stop it interfering with the page, leave the z-index high, and hide the DIV using the css display:none; and only show the DIV when you want it to block page interaction (during AjaXBusy).
Related
Update (problem): Once application is pushed to dev server, asp includes inject styles that override the actual custom coded needed styles. One instance below, wrapper div with a tag overrides all styled <a> tags and links within. It would be really quick to use none !important on the CSS color module. As disabling that everything resolves correctly. Now, I can do this with jQuery or (can move all a tag classes to the <head> with !important and override. Just wondering any thoughts or hacks about using or getting a 'none' effect in this type of scenario, that is all.
Let's just say situation / environment out of your hands.
And you must override a style.
Say your trying to override a color assigned to a div. Is the below valid / will it work? Is there an alternative. Defining a color not a possibility as will override other <a> tag colors.
#HUGEwrapperdiv a {
color: none !important;
}
No, it won't work. It will be ignored because none is an invalid value for the color property.
Depending on what you're trying to achieve, you could set it to transparent/inherit/initial.
These values are somewhat self-explanatory. The value inherit will cause the element to inherit the computed value of the color property from its parent element. The value initial will set the color to the browser's default color (likely specified in the user agent stylesheet). It's worth pointing out that the initial value isn't fully supported in all browsers.
I believe, as it seems to me that you're trying to get font to have no color/be transparent, that if you set the CSS color property (color:) to rgba(0,0,0,0), it will set the text to black, but also set its opacity to 0 so it won't be seen. I hope this helps.
to prevent overide you also can use in styles or make a custom class
color: unset !important
For example, if we need to set a div's font-size to 22px, is there a possible way to let the descendants of this div still inherit from the font-size from body? (or any inheritable style, thanks to #Sourabh for pointing out background is not inherited).
I think a key point is that so that we can change the style of body or some parent and let it pass through, even though there is an intermediate change of style. So preferably, we won't do it by:
body, #foo * { font-size: 16px }
#foo { font-size: 22px }
This is related to the case as described in How to solve flicker on iPad when event delegation is used? , where the -webkit-tap-highlight-color need to be set for a div, but the descendants of this div will be best to inherit what is above this div (the parent of this div).
I can use JavaScript to put the style of this div in a temporary variable, and then change the div's style, and then change the style for just the immediately children of this div to the value of that temporary variable, but then whatever that is set for the style of body won't get inherited by those children or their descendants.
No. In the DOM, a descendant element will inherit any inheritable CSS of the parent(s). You can 'reset' it back to match the parent item by declaring it again, but you can't do exactly what you are asking which is only changing the BODY style declaration.
Off the top of my head, the one solution I can think of would be not rely on pure inheritance from the body element but instead create a class and use it on all elements where you want to control aspects from one declaration. That still may be tricky due to CSS specificity, though.
If I'm understanding your question correctly, you could use a > combinator like so:
Working Example
body, #foo { background: yellow }
#foo>* { background: blue }
or like so:
Working Example2
body {
background: yellow;
}
#foo {
background: blue;
}
#foo>* {
background: yellow;
}
W3C background-color Stats
Initial: transparent
Inherited: no
All elements are transparent regardless of their parent's background-color. But that color is transparent so parent's color is visible on the child. So basically, if you want them to inherit color, you can't (not with CSS at least) (there might be a trick that I am not aware of). You have to specify the color for every element if you don't want it to be transparent.
The answer is not quite.
You can reset a property to its initial values by using the initial css keyword, which is particularly useful for these user-agent set styles (like -webkit-tap-highlight-color)
See this jsFiddle.
Note however that this isn't the value that would be set by default if the parent didn't exist, but literally the browser's default setting. In particular, body level formatting is not taken into account.
I've also included the default keyword, which is effectively the same as not including any font-size specifier at all - it goes up the cascade chain to find one that has a font-size specified, in this case on the element-name selector.
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.
i have a problem to override the css in content page div tag .
I'm using nested masters.So in both master pages i used so many div tags with same css theme.
But i want to omit css style for one particular div tag in content page.
Thanks in advance.
If you've defined styles to div { ... } in your CSS, then you can't simply 'disable' them on a new div unless you explicitly redefine them to the default. If all you div styles are declared via class or id attributes, then using a bare div will have this same effect.
Example, bad CSS. This can't be overridden without explicitly giving your target div a class or id and redefining font-size.
div { font-size: 23em; }
Example, better CSS. If you define all your div CSS with classes and ID's then when you want default styling just use a unclassed, un-ID'ed div.
div.reallyBig { font-size: 23em; }
Without seeing your original markup its hard to be much more specific. You may need to reassign styles / classes / id's for your desired effect.
You can give the div an ID and a style of its own using an id selector (#). You can't disable CSS for a specific instance of a tag.
Is there any way to apply a style that will effectively block the
application of any applied or inherited styles for that object and any
contained objects?
No. You'll have to override all other properties being set on it.
Write a style class i.e clearall override all the attributes that you need to what you want as the default vaules. i.e
.clearall {
display: block;
clear: both;
height: 1px;
margin: 0 0 0 0; ... }
Now, you can use that class to
<div class"clear">
<div class="awesome"> ..
</div>
</div>
<div class"clear">
<div class="woooow"> ..
</div>
</div>`
So now everytime that you need to reset the style, you can use that class
I would suggest to add at the end of your CSS code a complete reset code such as the one from Eric Meyer.
It should take care of erase most everything and and you can put your own code after that.
You can always can call !important on an element to override specificity inherits.
.wrapper p{color:red; background:blue;}
.wrapper div p{color:blue !important; background:none !important;}
Actually - no... But you can try to use jQuery for this purposes.
$('.class').removeClass().removeAttr('style');
It should remove all classes from matching elements and clear style attribute. Though, it's untested +)
If you want to do this for testing/debugging purposes, have a look at the Firefox Web Developer add-on. It has functions for removing CSS for whole pages or individual elements and their contained elements, or for altering CSS on the fly whilst viewing the page.
If you are looking for a good CSS reset for production use, have a look at Tripoli. This is a set of CSS styles that will reset the default rendering in each browser to the same common base, to use as a starting point for applying your own styles. There are many other CSS resets around but Tripoli is my personal favourite.
There‘s no one CSS property that turns off all other CSS properties. You’ll have to set each property to whatever value you want (for some CSS properties, e.g. font-family, there’s no “off” value — text has to be rendered in some font).
As for “that object and any contained objects” (emphasis mine), the * selector selects all elements. So, your CSS rule could look like this:
.turn-off-all-styles,
.turn-off-all-styles * {
/* Disable every CSS property here */
}
As others have mentioned, check out Eric Meyer’s CSS reset for a good example of setting all CSS properties to defaults. If you add !important after each value, that should stop other CSS rules from interfering with this style, e.g.
.turn-off-all-styles,
.turn-off-all-styles * {
margin: 0 !important;
...
}