This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
How do I prevent CSS inheritance?
Is there a way to declare the CSS property of an element such that it will not affect any of its children or is there a way to declare CSS of an element to implement just the style specified and not inherit any of the style declared for its parents?
A quick example
HTML:
<body>
<div id="container">
<form>
<div class="sub">Content of the paragraph
<div class='content'>Content of the span</div>
</div>
</form>
</div>
</body>
CSS:
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
Under normal circumstances one would expect the text block "Content of the paragraph" and "Content of the span" will both be 12px and bold.
Is there a property to include in the CSS above in the "div.content" block that will prevent it from inheriting the declaration in the "#container form div" block to limit the style to just "content of the paragraph" and spare "Content of the span" including any other children div?
If you are wondering why, well, I created a particular CSS file that gives all the forms on my project a particular feel and the div elements under the form all inherit the feel. No problem. But inside the form I want to use Flexigrid but flexigrid inherits the style and it just looks useless. If I use flexigrid outside the form and such it won't inherit the forms css, then it looks great. Otherwise it just looks terrible.
Unfortunately, you're out of luck here.
There is inherit to copy a certain value from a parent to its children, but there is no property the other way round (which would involve another selector to decide which style to revert).
You will have to revert style changes manually:
div { color: green; }
form div { color: red; }
form div div.content { color: green; }
If you have access to the markup, you can add several classes to style precisely what you need:
form div.sub { color: red; }
form div div.content { /* remains green */ }
Edit: The CSS Working Group is up to something:
div.content {
all: revert;
}
No idea, when or if ever this will be implemented by browsers.
Edit 2: As of March 2015 all modern browsers but Safari and IE/Edge have implemented it: https://twitter.com/LeaVerou/status/577390241763467264 (thanks, #Lea Verou!)
Edit 3: default was renamed to revert.
Can't you style the forms themselves? Then, style the divs accordingly.
form
{
/* styles */
}
You can always overrule inherited styles by making it important:
form
{
/* styles */ !important
}
CSS rules are inherited by default - hence the "cascading" name. To get what you want you need to use !important:
form div
{
font-size: 12px;
font-weight: bold;
}
div.content
{
// any rule you want here, followed by !important
}
Related
I was just playing around with CSS and noticed an interesting scenario for which I couldn't really find an explanation. Maybe some of you have the answer for this.
I have a div element with an inline styling
<div id="text-sample" style="overflow:hidden;">This is a sample text to test the CSS behavior of inline styling</div>
My CSS
#text-sample {
width:200px;
white-space: nowrap;
}
#text-sample:hover {
overflow:visible
}
Here the hover effect is not applying. That is, the overflow: visible rule is not taking.
Note: Moving the overflow:hidden from inline style will fix the issue.
I'm looking for the reason why hover effect is not applying. Can anyone explain this scenario?
All else being equal, inline styles take precedence over styles applied via stylesheet rules. In your case, when hovering, the overflow: visible is invoked via the stylesheet rule, but that cannot override the inline style. If necessary, you could try !important.
#text-sample {
width: 200px;
white-space: nowrap;
}
#text-sample:hover {
overflow: visible !important;
}
<div id="text-sample" style="overflow:hidden;">
This is a sample text to test the CSS behavior of inline styling
</div>
But it would be easier simply to specify overflow: hidden in the #text-sample stylesheet rule, instead of giving it inline.
Your inline style will always override your external CSS.
You can use !important in :hover
#text-sample {
width:200px;
white-space: nowrap;
}
#text-sample:hover {
overflow:visible!important;
}
Inline styles take precedence over style sheets. There are two ways to change that: using JavaScript or using !important in the style sheet.
#text-sample:hover {
overflow:visible !important;
}
In CSS, there's something called Specificity. Simply said, something like
#id { color: red; }
would take precedence over something like
.blue { color: red; }
when having something like <div id="id" class="blue">. See example below.
This is because an ID selector (#) is interpreted as more important than a class. In the same manner, an equally specific selector with a later declaration (later in the file) takes precedence and the more specific your selector gets, the more important it is.
For your example: An inline-style takes precedence over anything written in a CSS file (unless using !important). I believe the :hover does not change anything on that fact.
For the detailed rules look my link above.
div {
width:200px;
white-space: nowrap;
}
#text-sample:hover,
#sample-2:hover {
overflow:visible;
}
#sample-2 {
overflow: hidden;
}
#foo {
color: red;
}
.blue {
color: blue;
}
<div id="text-sample" style="overflow:hidden;">This is a sample text to test the CSS behavior of inline styling</div>
<div id="sample-2">This is a sample text to test the CSS behavior of inline styling</div>
<div id="foo" class="blue">foo</div>
EDIT
As mentioned in comments, Specificity does not apply to inline styles. Nevertheless, inline styles are taking precedence over anything in a CSS declarations in files. However, as soon as you move the rule into the same CSS file (as you mentioned will work), the :hover is more important than the other rule since it is more specific in the moment you're hovering.
So have my main style sheet that sets all the styles for my site. But I have a div that opens as menu. I need it to have it's own style and I can't have it or it's decedents inherent any styles from the main style sheet. But after I reset the style I'm then styling the div like it's a whole new element. I found the all: initial; rest the elements. and #we_gallery_edit_window > * sort of works. But when I try to declare the new styles some of the new styles won't take because of precedence. here is my code so far:
h1
{
color: #000000;
background-color: #FFFFFF;
}
#my_div > * /*Clear all previous CSS for #mydiv only */
{
all: initial;
}
.my_div_child h1
{
color: #F0F0F0;
}
<h1>Hello</h1> //Should be black with background
<div id='my_div'>
<h1 class='my_div_child'>Good bye</h1> //Should be grey without background
</div>
<h1>Hello</h1> //Should be black with background
I need a selector that will override everything above it but has no precedence over anything below it. So remove the style set by h1 in the main div, then reset h1 of .my_div_child. it's not just the h1 element I'm having trouble with but that's the easiest example I can think of.
Okay, after seeing the updated post, I think I get the idea.
I think you may be simply using the wrong selectors. You may review CSS selectors if you're unsure.
For one thing, if you want to style an h1 with the class of my_div_child, the rule would be h1.my_div_child, or simply .my_div_child, if you don't have other, non-h1 elements with that class name. Using .my_div_child h1 will select h1 tags inside a parent container with the class of my_div_child, which is not what your HTML shows.
If you want to reset the styles of children of #my_div, you can use the all: initial selector with the wildcard like you did, but instead of using the direct child selector (>), just nest the wildcard regularly:
#my_div * {
all: initial;
}
If you use the direct child selector, only the first level of children in #my_div will be reset, but grandchildren of #my_div won't be, which is probably not what you want.
Those things cleared up, simply use the above statement to reset your styles and then start styling the contents of #my_div as needed, and it should work because various tags (e.g., h1) will be more specific than the wildcard. See code snippet below.
That said, you may find it easier to simply override certain styles that aren't what you want by using specificity than to reset everything in #my_div and start over. Odds are there are some styles the menu will share with the site overall. For example:
h1 {
font-style: italic;
}
#my_div h1 {
font-style: normal;
}
If these approaches don't work, and you're still having trouble with your styles not working, you'd have to post some more specific code so we can work out what the problem is.
Example reset:
html {
background-color: coral;
font-style: italic;
font-family: sans-serif;
}
h1 {
background-color: white;
}
#my_div * {
all: initial;
}
#my_div .my_div_child {
color: darkgray;
font-size: 4em;
/* note that font-style and font-family don't need rules b/c they have been reset by all: initial above */
}
<h1>Hello</h1> <!-- Should be black with background -->
<div id="my_div">
<h1 class="my_div_child">Good bye</h1> <!-- Should be grey without background -->
</div>
<h1>Hello</h1> <!-- Should be black with background -->
My main HTML formatting is controlled by the
<P>
tag.
My application is dynamically constructed HTML using HTML fragments stored in a database, and block of text are encapsulated in tags, and thus pick up the default CSS styling for the tags. However sometimes erroneous extra tags get inserted like tags which will then negate the styling. The problem is that these extra tags could be anything, so it is difficult to construct a rule for every scenario. So what I need is a CSS rule that will apply to any text within it regardless of other existent tags.
So normal situation:
<style>
p {font-family:arial}
</style>
<p>this would render as arial</p>
<p><span>problems here</span></p>
<p><span style="font-family:calibri">problems here definitely, need to have paragraph rules imposed here ie overrule span font rule</span></p>
So I would like to know how I can get the paragraph CSS rule to overrule all child tag css rules.
Possible?
Thanks in advance.
/* Any tag inside p */
p * {
font-family: Arial !important;
}
If you know specific tag, like span, then
p span {
font-family: Arial !important;
}
inheritvalue reference
Test page
This has the advantage that it will inherit any font properties which are set by the parent element thus p. The !important is only needed when it concerns inline styles to be able to overide it.
All properties
p * {
font: inherit !important;
}
Or specifically one property
p * {
font-family: inherit !important;
}
Try this;
p {
font-family: arial;
}
p * {
font-family: inherit !important;
}
jsFiddle
NOTE: IE 7 or minor versions do not support inherit value
As an example I got a css class which applies to all labels within my website.
label
{
font-size: 18px;
}
Now after i install a external JS plugin i find that the plugin itself is affected by my base css.
<div>
<div class="plugin" />
<label>Xyz</label>
//Dynamic html inserted by plugin
</div>
The plugin has its own stylesheet so how can i prevent my base css style touching any elements within the plugin div?
EDIT
I must add that label was a very simple example. The actual layout is more complex with global styles touching various elements.
Don't make your css too general, try to be as specific as possible when you want to style only some of your elements. If you can't select your elements without affecting the plugin's elements add a class to them.
label{ /* too general, don't use this */
/* ... */
}
body > div > form > label{ /* more specific, but maybe still affecting your plugin */
/* ... */
}
label.noplugin{ /* use a class on non-plugin elements */
/* ... */
}
div:not(.plugin) > label{ /* affecting only children of div which are NOT
tagged with the plugin class */
/* ... */
}
So in your case a better way to style your label would be
<div>
<div class="plugin">
<label>Xyz</label>
//Dynamic html inserted by plugin
</div>
</div>
CSS:
*:not(.plugin) > label
{
font-size: 18px;
}
Please note that :not is unfortunately not supported by IE ≤8.
You need to do two things.
i) Give your parent container ID
ii) And style child label of container.
Here is fiddle workout.
I have a twitter widget which is loaded into the footer of my page. The problem is that it uses !important properties all over the place. And because my stylesheets are all loaded into the head, the widget's style sheets automatically override any of mine.
Do I really have to put a couple of separate styles in the footer of my document, below the widget, to get force this. Or is there a more semantic method?
I would go through and see if there is a way to make your CSS more specific than the selectors used in twitter. The rules of specificity will ensure that your !important styles override the twitter !important styles.
Otherwise, as a last resort and if !important is only used on classes in the Twitter CSS then you could assign an id to anything that is overridden to ensure that your selectors are more specific.
/* your style */
#anti_twitter a.link {
color: blue !important;
}
/* twitter style */
a.link {
color: red !important;
}
So using the code above, the links would come out blue.
JSFiddle: http://jsfiddle.net/9T9uk/
<div id="myWrapper">
<div id="theDefaultId">
....
</div>
</div>
and you can use #myWrapper #theDefaultId { anything: value !important; }
theDefaultId is the id which the twitter widget uses and #myWrapper is an id defined by us.
This should work.