I have a div to which i appy a css class.Now in css class heigh is decalred as x px but i want my div to be of y px.How can i overide hight paramater of css without changing css.
<div style="height: 80px"></div>
The browser assigns the styles with the highest specificity to the elements. As you can read here 'style' has the highest specificity.
You can override specificity by using the !important declaration.
There are several ways to override the value of a CSS attribute defined in a class.
This is really a huge topic, though -- so if you really want to understand this stuff, start here with a tutorial on CSS Specificity.
You need to change the CSS to overwrite it - either use the cascade to give it a new value, or add an inline style attribute which has precedence over external styles declarations (watch for !important).
CSS declarations cascade. Meaning you can attach additional rules to other CSS classes and assign both to an element:
<style type="text/css">
.style1 {
color: red;
height: 100px;
}
.style1.style2 {
height: 200px;
}
</style>
<!-- This DIV will have a height of 200px and red foreground color -->
<div class="style1 style2"></div>
use inline css with !important tag
<div class="yourclass" style="height:ypx!important">
Related
I'm making an HTML email signature with inline CSS (i.e. CSS in style attributes), and I am curious as to whether it's possible to use the :before and :after pseudo-elements.
If so, how would I implement something like this with inline CSS?
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
You can't specify inline styles for pseudo-elements.
This is because pseudo-elements, like pseudo-classes (see my answer to this other question), are defined in CSS using selectors as abstractions of the document tree that can't be expressed in HTML. An inline style attribute, on the other hand, is specified within HTML for a particular element.
Since inline styles can only occur in HTML, they will only apply to the HTML element that they're defined on, and not to any pseudo-elements it generates.
As an aside, the main difference between pseudo-elements and pseudo-classes in this aspect is that properties that are inherited by default will be inherited by :before and :after from the generating element, whereas pseudo-class styles just don't apply at all. In your case, for example, if you place text-align: justify in an inline style attribute for a td element, it will be inherited by td:after. The caveat is that you can't declare td:after with the inline style attribute; you must do it in the stylesheet.
as mentioned above: its not possible to call a css pseudo-class / -element inline.
what i now did, is:
give your element a unique identifier, f.ex. an id or a unique class.
and write a fitting <style> element
<style>#id29:before { content: "*";}</style>
<article id="id29">
<!-- something -->
</article>
fugly, but what inline css isnt..?
You can use the data in inline
<style>
td { text-align: justify; }
td:after { content: attr(data-content); display: inline-block; width: 100%; }
</style>
<table><tr><td data-content="post"></td></tr></table>
You can't create pseudo elements in inline css.
However, if you can create a pseudo element in a stylesheet, then there's a way to style it inline by setting an inline style to its parent element, and then using inherit keyword to style the pseudo element, like this:
<parent style="background-image:url(path/to/file); background-size:0px;"></p>
<style>
parent:before{
content:'';
background-image:inherit;
(other)
}
</style>
sometimes this can be handy.
No you cant target the pseudo-classes or pseudo-elements in inline-css as David Thomas said.
For more details see this answer by BoltClock about Pseudo-classes
No. The style attribute only defines style properties for a given
HTML element. Pseudo-classes are a member of the family of selectors,
which don't occur in the attribute .....
We can also write use same for the pseudo-elements
No. The style attribute only defines style properties for a given
HTML element. Pseudo-classes and pseudo-elements the are a member of the family of selectors, which don't occur in the attribute so you cant style them inline.
Yes it's possible, just add inline styles for the element which you adding after or before, Example
<style>
.horizontalProgress:after { width: 45%; }
</style><!-- Change Value from Here -->
<div class="horizontalProgress"></div>
As mentioned before, you can't use inline elements for styling pseudo classes. Before and after pseudo classes are states of elements, not actual elements. You could only possibly use
JavaScript for this.
If you have control over the HTML then you could add a real element instead of a pseudo one.
:before and :after pseudo elements are rendered right after the open tag or right before the close tag.
The inline equivalent for this css
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
Would be something like this:
<table>
<tr>
<td style="text-align: justify;">
TD Content
<span class="inline_td_after" style="display: inline-block; width: 100%;"></span>
</td>
</tr>
</table>
Keep in mind; Your "real" before and after elements and anything with inline css will greatly increase the size of your pages and ignore page load optimizations that external css and pseudo elements make possible.
you can use
parent.style.setProperty("--padding-top", (height*100/width).toFixed(2)+"%");
in css
el:after{
....
padding-top:var(--padding-top, 0px);
}
EDITED: If you have access to the stylesheet, you can pass the variable values inline and then, in your stylesheet, use the inherit value for the pseudo-element property you want to manipulate:
HTML
<div style="color: whitesmoke;">
</div>
CSS
div::before {
content: '';
color: inherit;
}
Useful for background images for example.
I am trying to apply a hover effect on a div. Why isn't this working at all?
My Html looks like this:
<a href="#panel-866" id="panel-866">
<div class="application-icon" style="background-image: url('/custom-icon-off.png')">
</div>
</a>
CSS
.tab-title > #panel-866 .application-icon:hover {
background-image:url(/custom-icon-hover.png);
}
You need to override the inline styles, which have higher specificity than external / embedded styles.
Try this:
#panel-866 > .application-icon:hover {
background-image:url('/custom-icon-hover.png') !important;
}
Here's a demo: https://jsfiddle.net/0aghvn3u/
The '>' - selector gets direct descendants, maybe just remove
.tab-title >
and it will work. Difficult to say without knowing your markup since its a simple task and your solution seems to be correct.
Make it important so it overrides the anchor tag's default hover styles.
.tab-title > #panel-866 .application-icon:hover {
background-image:url('/custom-icon-hover.png') !important;
}
There are a few problems with your code, so it's hard to say what specifically is causing the problem. You have a div element in an a tag, which you should avoid because block level elements don't work well within inline elements. This is likely not the problem, though.
I've added some markup and removed some CSS that included a selector not in the code you presented here that might have caused the effect not to work:
<a href="#panel-866" id="panel-866">
<span class="application-icon" style="background-image: url('http://lorempixel.com/400/400')">
</span>
</a>
and
#panel-866 .application-icon {
height: 400px;
width: 400px;
display: block;
}
#panel-866 .application-icon:hover {
background-image: url(http://lorempixel.com/200/400) !important;
}
Notice I made the inline span element display:block (this is technically "allowed") so I could give it a width and height. Even when on a div element, background images need a width and height to display.
Secondly, as the other posters mentioned, adding an !important declaration to your :hover style rule is needed because browsers will always override internal or external style rules with inline ones.
https://jsfiddle.net/3b2ywp5b/
Is there any way to override inline CSS without using !important and without using JavaScript?
For example:
<div style="background-color: red;"></div>
I was wondering if it can be overridden without:
div {
background-color: blue !important;
}
No, inline style takes precedence, you can override it only with !important.
I'm afraid the !important clause is specifically created as the solution for this. It would be impractical for CSS to implement different degrees of priority, apart from the now-used
style block < inline < !important
priority.
Try this:
div[style] {
background: blue !important;
}
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/
I want to prevent this CSS selector from being applied to all elements in the page:
input {
color:red;
}
This will make the text red for <input>s of every type, but I want to exclude one input from this without changing the selector or style of this CSS rule. The element should have the default style (how it is when you have no css on the page).
You can use the not selector. Since an input field should have a name, you could exclude it by using:
input:not([name="exludeme"]) { }
This method won't work in IE8 and earlier versions. To support ie7 and ie8 too, you could use the attribute selector. In this case you have to reset the field:
input[name="exludeme"] { /*add all your reset styles here*/ }
add an id for the different one and apply it just for him, and to make sure that no other css will overwrite the css you choose use !important
html:
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box" id="diff"></div>
css:
div.box {
background-color:red;
width:50px;
height:50px;
position: relative;
}
#diff{
background-color:black !important ;
}
check this: http://jsfiddle.net/y32Wv/
note: !important is optional, depends on the selector position inside the file, but in cases where it might be overwrite by other css rule (for example if someone change the order of the css rules) it will stop working right, and !important will prevent it from happening.