How to ignore parent css style
I'm wondering how to ignore a parent style and use the default style (none). I'll show my specific case as an example but I'm pretty sure this is a general question.
<style>
#elementId select {
height:1em;
}
</style>
<div id="elementId">
<select name="funTimes" style="" size="5">
<option value="test1">fish</option>
<option value="test2">eat</option>
<option value="test3">cows</option>
</select>
</div>
Ways I do not want to solve this problem:
- I cannot edit the stylesheet where the "#elementId select" is set, my module won't have access that.
- Preferably not override the height style using the style attribute.
For example using firebug i can turn off the parent style and all is well, this is the effect I am going for.
Once a style is set, can it be disabled or must it be overridden?
css
edited May 17 '12 at 15:01
BoltClock♦
516k12811531191
asked Jun 3 '09 at 19:24
SeanDowneySeanDowney
10k167081
add a comment |
I'm wondering how to ignore a parent style and use the default style (none). I'll show my specific case as an example but I'm pretty sure this is a general question.
<style>
#elementId select {
height:1em;
}
</style>
<div id="elementId">
<select name="funTimes" style="" size="5">
<option value="test1">fish</option>
<option value="test2">eat</option>
<option value="test3">cows</option>
</select>
</div>
Ways I do not want to solve this problem:
- I cannot edit the stylesheet where the "#elementId select" is set, my module won't have access that.
- Preferably not override the height style using the style attribute.
For example using firebug i can turn off the parent style and all is well, this is the effect I am going for.
Once a style is set, can it be disabled or must it be overridden?
css
edited May 17 '12 at 15:01
BoltClock♦
516k12811531191
asked Jun 3 '09 at 19:24
SeanDowneySeanDowney
10k167081
add a comment |
I'm wondering how to ignore a parent style and use the default style (none). I'll show my specific case as an example but I'm pretty sure this is a general question.
<style>
#elementId select {
height:1em;
}
</style>
<div id="elementId">
<select name="funTimes" style="" size="5">
<option value="test1">fish</option>
<option value="test2">eat</option>
<option value="test3">cows</option>
</select>
</div>
Ways I do not want to solve this problem:
- I cannot edit the stylesheet where the "#elementId select" is set, my module won't have access that.
- Preferably not override the height style using the style attribute.
For example using firebug i can turn off the parent style and all is well, this is the effect I am going for.
Once a style is set, can it be disabled or must it be overridden?
css
edited May 17 '12 at 15:01
BoltClock♦
516k12811531191
asked Jun 3 '09 at 19:24
SeanDowneySeanDowney
10k167081
I'm wondering how to ignore a parent style and use the default style (none). I'll show my specific case as an example but I'm pretty sure this is a general question.
<style>
#elementId select {
height:1em;
}
</style>
<div id="elementId">
<select name="funTimes" style="" size="5">
<option value="test1">fish</option>
<option value="test2">eat</option>
<option value="test3">cows</option>
</select>
</div>
Ways I do not want to solve this problem:
- I cannot edit the stylesheet where the "#elementId select" is set, my module won't have access that.
- Preferably not override the height style using the style attribute.
For example using firebug i can turn off the parent style and all is well, this is the effect I am going for.
Once a style is set, can it be disabled or must it be overridden?
css
css
edited May 17 '12 at 15:01
BoltClock♦
516k12811531191
asked Jun 3 '09 at 19:24
SeanDowneySeanDowney
10k167081
edited May 17 '12 at 15:01
BoltClock♦
516k12811531191
asked Jun 3 '09 at 19:24
SeanDowneySeanDowney
10k167081
edited May 17 '12 at 15:01
BoltClock♦
516k12811531191
edited May 17 '12 at 15:01
BoltClock♦
516k12811531191
edited May 17 '12 at 15:01
BoltClock♦
516k12811531191
516k12811531191
asked Jun 3 '09 at 19:24
SeanDowneySeanDowney
10k167081
asked Jun 3 '09 at 19:24
SeanDowneySeanDowney
10k167081
asked Jun 3 '09 at 19:24
SeanDowneySeanDowney
10k167081
10k167081
add a comment |
add a comment |
9 Answers
9
active
oldest
votes
It must be overridden. You could use:
<!-- Add a class name to override -->
<select name="funTimes" class="funTimes" size="5">
#elementId select.funTimes {
/* Override styles here */
}
Make sure you use !important flag in css style e.g. margin-top: 0px !important What does !important mean in CSS?
You could use an attribute selector, but since that isn't supported by legacy browsers (read IE6 etc), it's better to add a class name
edited Dec 28 '18 at 7:11
Dhwaneel
34146
answered Jun 3 '09 at 19:26
PatrikAkerstrandPatrikAkerstrand
38.7k76992
add a comment |
You could turn it off by overriding it like this:
height:auto !important;
edited Sep 25 '11 at 17:11
Trott
37.3k1899151
answered May 3 '10 at 21:19
Fabian BrenesFabian Brenes
6321811
3
I would advise against using!importantin your production markup - it should really only be used when debugging.
– Amicable
Oct 6 '15 at 16:44
@Amicable can you explain why this is not advisable?
– pipo_dev
Jan 7 '16 at 13:26
1
@pipo_dev there are a lot of articles online which could explain it better than I could in a comment and with examples. It a nutshell, it's a hack. 99% of the time it's used in lei of a proper fix which would result in better and more maintainable CSS. Some acceptable uses of!importantinclude utility classes and backwards compatibility hacks for ancient browsers like IE7
– Amicable
Jan 7 '16 at 14:14
add a comment |
You should use this
height:auto !important;
answered May 27 '15 at 7:57
Ahmar MahmoodAhmar Mahmood
492
add a comment |
you can create another definition lower in your CSS stylesheet that basically reverses the initial rule. you could also append "!important" to said rule to make sure it sticks.
answered Jun 3 '09 at 19:33
JasonJason
34.6k35111174
add a comment |
I had a similar situation while working on a joomla website.
Added a class name to the module to be affected. In your case:
<select name="funTimes" class="classname">
then made the following single line change in the css. Added the line
#elementId div.classname {style to be applied !important;}
worked well!
answered Feb 24 '12 at 20:11
RajatgsrRajatgsr
163
add a comment |
if i understood the qeustion correctly:
you can use "auto" in the css like this width:auto and then it will go back to default settings
answered Jan 20 '13 at 13:27
elad silverelad silver
4,20922747
add a comment |
It would make sense for CSS to have a way to simply add an additional style (in the head section of your page, for example, which would override the linked style sheet) such as this:
<head>
<style>
#elementId select {
/* turn all styles off (no way to do this) */
}
</style>
</head>
and turn off all previously applied styles, but there is no way to do this. You will have to override the height attribute and set it to a new value in the head section of your pages.
<head>
<style>
#elementId select {
height:1.5em;
}
</style>
</head>
edited Sep 25 '11 at 17:11
Trott
37.3k1899151
answered Jun 4 '09 at 20:34
Christopher TokarChristopher Tokar
7,07783155
add a comment |
Please see below typescript for re-applying css class again to an element to override parent container (usually a framework component) css styles and force your custom styles. Your app framework (be it angular/react, probably does this so the parent container css was re-applied and none of your expected effects in css-class-name is showing up for your child element. Call this.overrideParentCssRule(childElement, 'css-class-name'); to do what the framework just did (call this in document.ready or end of event handler):
overrideParentCssRule(elem: HTMLElement, className: string) {
let cssRules = this.getCSSStyle(className);
for (let r: number = 0; r < cssRules.length; r++) {
let rule: CSSStyleRule = cssRules[r];
Object.keys(rule.style).forEach(s => {
if (isNaN(Number(s)) && rule.style[s]) {
elem.style[s] = rule.style[s];
}
});
}
}
- Mike Zheng tradrejoe@gmail.com
answered Dec 4 '18 at 1:03
Michael ZhengMichael Zheng
123
Can you explain why one should use typescript for such a simple requirement?
– Nico Haase
Dec 28 '18 at 7:15
add a comment |
This got bumped to the top because of an edit ... The answers have gotten a bit stale, and not as useful today as another solution has been added to the standard.
There is now an "all" shorthand property.
#elementId select.funTimes {
all: initial;
}
This sets all css properties to their initial value ... note some of the initial values are inherit; Resulting in some formatting still taking place on the element.
Because of that pause required when reading the code or reviewing it in the future, don't use it unless you most as the review process is a point where errors/bugs can be made! when editing the page. But clearly if there are a large number of properties that need to be reset, then "all" is the way to go.
Standard is online here: https://drafts.csswg.org/css-cascade/#all-shorthand
answered Dec 28 '18 at 7:38
WayneWayne
3,83311623
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f946645%2fhow-to-ignore-parent-css-style%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
9 Answers
9
active
oldest
votes
9 Answers
9
active
oldest
votes
active
oldest
votes
active
oldest
votes
It must be overridden. You could use:
<!-- Add a class name to override -->
<select name="funTimes" class="funTimes" size="5">
#elementId select.funTimes {
/* Override styles here */
}
Make sure you use !important flag in css style e.g. margin-top: 0px !important What does !important mean in CSS?
You could use an attribute selector, but since that isn't supported by legacy browsers (read IE6 etc), it's better to add a class name
edited Dec 28 '18 at 7:11
Dhwaneel
34146
answered Jun 3 '09 at 19:26
PatrikAkerstrandPatrikAkerstrand
38.7k76992
add a comment |
It must be overridden. You could use:
<!-- Add a class name to override -->
<select name="funTimes" class="funTimes" size="5">
#elementId select.funTimes {
/* Override styles here */
}
Make sure you use !important flag in css style e.g. margin-top: 0px !important What does !important mean in CSS?
You could use an attribute selector, but since that isn't supported by legacy browsers (read IE6 etc), it's better to add a class name
edited Dec 28 '18 at 7:11
Dhwaneel
34146
answered Jun 3 '09 at 19:26
PatrikAkerstrandPatrikAkerstrand
38.7k76992
add a comment |
It must be overridden. You could use:
<!-- Add a class name to override -->
<select name="funTimes" class="funTimes" size="5">
#elementId select.funTimes {
/* Override styles here */
}
Make sure you use !important flag in css style e.g. margin-top: 0px !important What does !important mean in CSS?
You could use an attribute selector, but since that isn't supported by legacy browsers (read IE6 etc), it's better to add a class name
edited Dec 28 '18 at 7:11
Dhwaneel
34146
answered Jun 3 '09 at 19:26
PatrikAkerstrandPatrikAkerstrand
38.7k76992
It must be overridden. You could use:
<!-- Add a class name to override -->
<select name="funTimes" class="funTimes" size="5">
#elementId select.funTimes {
/* Override styles here */
}
Make sure you use !important flag in css style e.g. margin-top: 0px !important What does !important mean in CSS?
You could use an attribute selector, but since that isn't supported by legacy browsers (read IE6 etc), it's better to add a class name
edited Dec 28 '18 at 7:11
Dhwaneel
34146
answered Jun 3 '09 at 19:26
PatrikAkerstrandPatrikAkerstrand
38.7k76992
edited Dec 28 '18 at 7:11
Dhwaneel
34146
edited Dec 28 '18 at 7:11
Dhwaneel
34146
edited Dec 28 '18 at 7:11
Dhwaneel
34146
34146
answered Jun 3 '09 at 19:26
PatrikAkerstrandPatrikAkerstrand
38.7k76992
answered Jun 3 '09 at 19:26
PatrikAkerstrandPatrikAkerstrand
38.7k76992
answered Jun 3 '09 at 19:26
PatrikAkerstrandPatrikAkerstrand
38.7k76992
38.7k76992
add a comment |
add a comment |
You could turn it off by overriding it like this:
height:auto !important;
edited Sep 25 '11 at 17:11
Trott
37.3k1899151
answered May 3 '10 at 21:19
Fabian BrenesFabian Brenes
6321811
3
I would advise against using!importantin your production markup - it should really only be used when debugging.
– Amicable
Oct 6 '15 at 16:44
@Amicable can you explain why this is not advisable?
– pipo_dev
Jan 7 '16 at 13:26
1
@pipo_dev there are a lot of articles online which could explain it better than I could in a comment and with examples. It a nutshell, it's a hack. 99% of the time it's used in lei of a proper fix which would result in better and more maintainable CSS. Some acceptable uses of!importantinclude utility classes and backwards compatibility hacks for ancient browsers like IE7
– Amicable
Jan 7 '16 at 14:14
add a comment |
You could turn it off by overriding it like this:
height:auto !important;
edited Sep 25 '11 at 17:11
Trott
37.3k1899151
answered May 3 '10 at 21:19
Fabian BrenesFabian Brenes
6321811
3
I would advise against using!importantin your production markup - it should really only be used when debugging.
– Amicable
Oct 6 '15 at 16:44
@Amicable can you explain why this is not advisable?
– pipo_dev
Jan 7 '16 at 13:26
1
@pipo_dev there are a lot of articles online which could explain it better than I could in a comment and with examples. It a nutshell, it's a hack. 99% of the time it's used in lei of a proper fix which would result in better and more maintainable CSS. Some acceptable uses of!importantinclude utility classes and backwards compatibility hacks for ancient browsers like IE7
– Amicable
Jan 7 '16 at 14:14
add a comment |
You could turn it off by overriding it like this:
height:auto !important;
edited Sep 25 '11 at 17:11
Trott
37.3k1899151
answered May 3 '10 at 21:19
Fabian BrenesFabian Brenes
6321811
You could turn it off by overriding it like this:
height:auto !important;
edited Sep 25 '11 at 17:11
Trott
37.3k1899151
answered May 3 '10 at 21:19
Fabian BrenesFabian Brenes
6321811
edited Sep 25 '11 at 17:11
Trott
37.3k1899151
edited Sep 25 '11 at 17:11
Trott
37.3k1899151
edited Sep 25 '11 at 17:11
Trott
37.3k1899151
37.3k1899151
answered May 3 '10 at 21:19
Fabian BrenesFabian Brenes
6321811
answered May 3 '10 at 21:19
Fabian BrenesFabian Brenes
6321811
answered May 3 '10 at 21:19
Fabian BrenesFabian Brenes
6321811
6321811
3
I would advise against using!importantin your production markup - it should really only be used when debugging.
– Amicable
Oct 6 '15 at 16:44
@Amicable can you explain why this is not advisable?
– pipo_dev
Jan 7 '16 at 13:26
1
@pipo_dev there are a lot of articles online which could explain it better than I could in a comment and with examples. It a nutshell, it's a hack. 99% of the time it's used in lei of a proper fix which would result in better and more maintainable CSS. Some acceptable uses of!importantinclude utility classes and backwards compatibility hacks for ancient browsers like IE7
– Amicable
Jan 7 '16 at 14:14
add a comment |
3
I would advise against using!importantin your production markup - it should really only be used when debugging.
– Amicable
Oct 6 '15 at 16:44
@Amicable can you explain why this is not advisable?
– pipo_dev
Jan 7 '16 at 13:26
1
@pipo_dev there are a lot of articles online which could explain it better than I could in a comment and with examples. It a nutshell, it's a hack. 99% of the time it's used in lei of a proper fix which would result in better and more maintainable CSS. Some acceptable uses of!importantinclude utility classes and backwards compatibility hacks for ancient browsers like IE7
– Amicable
Jan 7 '16 at 14:14
3
3
I would advise against using
!important in your production markup - it should really only be used when debugging.– Amicable
Oct 6 '15 at 16:44
I would advise against using
!important in your production markup - it should really only be used when debugging.– Amicable
Oct 6 '15 at 16:44
@Amicable can you explain why this is not advisable?
– pipo_dev
Jan 7 '16 at 13:26
@Amicable can you explain why this is not advisable?
– pipo_dev
Jan 7 '16 at 13:26
1
1
@pipo_dev there are a lot of articles online which could explain it better than I could in a comment and with examples. It a nutshell, it's a hack. 99% of the time it's used in lei of a proper fix which would result in better and more maintainable CSS. Some acceptable uses of
!important include utility classes and backwards compatibility hacks for ancient browsers like IE7– Amicable
Jan 7 '16 at 14:14
@pipo_dev there are a lot of articles online which could explain it better than I could in a comment and with examples. It a nutshell, it's a hack. 99% of the time it's used in lei of a proper fix which would result in better and more maintainable CSS. Some acceptable uses of
!important include utility classes and backwards compatibility hacks for ancient browsers like IE7– Amicable
Jan 7 '16 at 14:14
add a comment |
You should use this
height:auto !important;
answered May 27 '15 at 7:57
Ahmar MahmoodAhmar Mahmood
492
add a comment |
You should use this
height:auto !important;
answered May 27 '15 at 7:57
Ahmar MahmoodAhmar Mahmood
492
add a comment |
You should use this
height:auto !important;
answered May 27 '15 at 7:57
Ahmar MahmoodAhmar Mahmood
492
You should use this
height:auto !important;
answered May 27 '15 at 7:57
Ahmar MahmoodAhmar Mahmood
492
answered May 27 '15 at 7:57
Ahmar MahmoodAhmar Mahmood
492
answered May 27 '15 at 7:57
Ahmar MahmoodAhmar Mahmood
492
answered May 27 '15 at 7:57
Ahmar MahmoodAhmar Mahmood
492
492
add a comment |
add a comment |
you can create another definition lower in your CSS stylesheet that basically reverses the initial rule. you could also append "!important" to said rule to make sure it sticks.
answered Jun 3 '09 at 19:33
JasonJason
34.6k35111174
add a comment |
you can create another definition lower in your CSS stylesheet that basically reverses the initial rule. you could also append "!important" to said rule to make sure it sticks.
answered Jun 3 '09 at 19:33
JasonJason
34.6k35111174
add a comment |
you can create another definition lower in your CSS stylesheet that basically reverses the initial rule. you could also append "!important" to said rule to make sure it sticks.
answered Jun 3 '09 at 19:33
JasonJason
34.6k35111174
you can create another definition lower in your CSS stylesheet that basically reverses the initial rule. you could also append "!important" to said rule to make sure it sticks.
answered Jun 3 '09 at 19:33
JasonJason
34.6k35111174
answered Jun 3 '09 at 19:33
JasonJason
34.6k35111174
answered Jun 3 '09 at 19:33
JasonJason
34.6k35111174
answered Jun 3 '09 at 19:33
JasonJason
34.6k35111174
34.6k35111174
add a comment |
add a comment |
I had a similar situation while working on a joomla website.
Added a class name to the module to be affected. In your case:
<select name="funTimes" class="classname">
then made the following single line change in the css. Added the line
#elementId div.classname {style to be applied !important;}
worked well!
answered Feb 24 '12 at 20:11
RajatgsrRajatgsr
163
add a comment |
I had a similar situation while working on a joomla website.
Added a class name to the module to be affected. In your case:
<select name="funTimes" class="classname">
then made the following single line change in the css. Added the line
#elementId div.classname {style to be applied !important;}
worked well!
answered Feb 24 '12 at 20:11
RajatgsrRajatgsr
163
add a comment |
I had a similar situation while working on a joomla website.
Added a class name to the module to be affected. In your case:
<select name="funTimes" class="classname">
then made the following single line change in the css. Added the line
#elementId div.classname {style to be applied !important;}
worked well!
answered Feb 24 '12 at 20:11
RajatgsrRajatgsr
163
I had a similar situation while working on a joomla website.
Added a class name to the module to be affected. In your case:
<select name="funTimes" class="classname">
then made the following single line change in the css. Added the line
#elementId div.classname {style to be applied !important;}
worked well!
answered Feb 24 '12 at 20:11
RajatgsrRajatgsr
163
answered Feb 24 '12 at 20:11
RajatgsrRajatgsr
163
answered Feb 24 '12 at 20:11
RajatgsrRajatgsr
163
answered Feb 24 '12 at 20:11
RajatgsrRajatgsr
163
163
add a comment |
add a comment |
if i understood the qeustion correctly:
you can use "auto" in the css like this width:auto and then it will go back to default settings
answered Jan 20 '13 at 13:27
elad silverelad silver
4,20922747
add a comment |
if i understood the qeustion correctly:
you can use "auto" in the css like this width:auto and then it will go back to default settings
answered Jan 20 '13 at 13:27
elad silverelad silver
4,20922747
add a comment |
if i understood the qeustion correctly:
you can use "auto" in the css like this width:auto and then it will go back to default settings
answered Jan 20 '13 at 13:27
elad silverelad silver
4,20922747
if i understood the qeustion correctly:
you can use "auto" in the css like this width:auto and then it will go back to default settings
answered Jan 20 '13 at 13:27
elad silverelad silver
4,20922747
answered Jan 20 '13 at 13:27
elad silverelad silver
4,20922747
answered Jan 20 '13 at 13:27
elad silverelad silver
4,20922747
answered Jan 20 '13 at 13:27
elad silverelad silver
4,20922747
4,20922747
add a comment |
add a comment |
It would make sense for CSS to have a way to simply add an additional style (in the head section of your page, for example, which would override the linked style sheet) such as this:
<head>
<style>
#elementId select {
/* turn all styles off (no way to do this) */
}
</style>
</head>
and turn off all previously applied styles, but there is no way to do this. You will have to override the height attribute and set it to a new value in the head section of your pages.
<head>
<style>
#elementId select {
height:1.5em;
}
</style>
</head>
edited Sep 25 '11 at 17:11
Trott
37.3k1899151
answered Jun 4 '09 at 20:34
Christopher TokarChristopher Tokar
7,07783155
add a comment |
It would make sense for CSS to have a way to simply add an additional style (in the head section of your page, for example, which would override the linked style sheet) such as this:
<head>
<style>
#elementId select {
/* turn all styles off (no way to do this) */
}
</style>
</head>
and turn off all previously applied styles, but there is no way to do this. You will have to override the height attribute and set it to a new value in the head section of your pages.
<head>
<style>
#elementId select {
height:1.5em;
}
</style>
</head>
edited Sep 25 '11 at 17:11
Trott
37.3k1899151
answered Jun 4 '09 at 20:34
Christopher TokarChristopher Tokar
7,07783155
add a comment |
It would make sense for CSS to have a way to simply add an additional style (in the head section of your page, for example, which would override the linked style sheet) such as this:
<head>
<style>
#elementId select {
/* turn all styles off (no way to do this) */
}
</style>
</head>
and turn off all previously applied styles, but there is no way to do this. You will have to override the height attribute and set it to a new value in the head section of your pages.
<head>
<style>
#elementId select {
height:1.5em;
}
</style>
</head>
edited Sep 25 '11 at 17:11
Trott
37.3k1899151
answered Jun 4 '09 at 20:34
Christopher TokarChristopher Tokar
7,07783155
It would make sense for CSS to have a way to simply add an additional style (in the head section of your page, for example, which would override the linked style sheet) such as this:
<head>
<style>
#elementId select {
/* turn all styles off (no way to do this) */
}
</style>
</head>
and turn off all previously applied styles, but there is no way to do this. You will have to override the height attribute and set it to a new value in the head section of your pages.
<head>
<style>
#elementId select {
height:1.5em;
}
</style>
</head>
edited Sep 25 '11 at 17:11
Trott
37.3k1899151
answered Jun 4 '09 at 20:34
Christopher TokarChristopher Tokar
7,07783155
edited Sep 25 '11 at 17:11
Trott
37.3k1899151
edited Sep 25 '11 at 17:11
Trott
37.3k1899151
edited Sep 25 '11 at 17:11
Trott
37.3k1899151
37.3k1899151
answered Jun 4 '09 at 20:34
Christopher TokarChristopher Tokar
7,07783155
answered Jun 4 '09 at 20:34
Christopher TokarChristopher Tokar
7,07783155
answered Jun 4 '09 at 20:34
Christopher TokarChristopher Tokar
7,07783155
7,07783155
add a comment |
add a comment |
Please see below typescript for re-applying css class again to an element to override parent container (usually a framework component) css styles and force your custom styles. Your app framework (be it angular/react, probably does this so the parent container css was re-applied and none of your expected effects in css-class-name is showing up for your child element. Call this.overrideParentCssRule(childElement, 'css-class-name'); to do what the framework just did (call this in document.ready or end of event handler):
overrideParentCssRule(elem: HTMLElement, className: string) {
let cssRules = this.getCSSStyle(className);
for (let r: number = 0; r < cssRules.length; r++) {
let rule: CSSStyleRule = cssRules[r];
Object.keys(rule.style).forEach(s => {
if (isNaN(Number(s)) && rule.style[s]) {
elem.style[s] = rule.style[s];
}
});
}
}
- Mike Zheng tradrejoe@gmail.com
answered Dec 4 '18 at 1:03
Michael ZhengMichael Zheng
123
Can you explain why one should use typescript for such a simple requirement?
– Nico Haase
Dec 28 '18 at 7:15
add a comment |
Please see below typescript for re-applying css class again to an element to override parent container (usually a framework component) css styles and force your custom styles. Your app framework (be it angular/react, probably does this so the parent container css was re-applied and none of your expected effects in css-class-name is showing up for your child element. Call this.overrideParentCssRule(childElement, 'css-class-name'); to do what the framework just did (call this in document.ready or end of event handler):
overrideParentCssRule(elem: HTMLElement, className: string) {
let cssRules = this.getCSSStyle(className);
for (let r: number = 0; r < cssRules.length; r++) {
let rule: CSSStyleRule = cssRules[r];
Object.keys(rule.style).forEach(s => {
if (isNaN(Number(s)) && rule.style[s]) {
elem.style[s] = rule.style[s];
}
});
}
}
- Mike Zheng tradrejoe@gmail.com
answered Dec 4 '18 at 1:03
Michael ZhengMichael Zheng
123
Can you explain why one should use typescript for such a simple requirement?
– Nico Haase
Dec 28 '18 at 7:15
add a comment |
Please see below typescript for re-applying css class again to an element to override parent container (usually a framework component) css styles and force your custom styles. Your app framework (be it angular/react, probably does this so the parent container css was re-applied and none of your expected effects in css-class-name is showing up for your child element. Call this.overrideParentCssRule(childElement, 'css-class-name'); to do what the framework just did (call this in document.ready or end of event handler):
overrideParentCssRule(elem: HTMLElement, className: string) {
let cssRules = this.getCSSStyle(className);
for (let r: number = 0; r < cssRules.length; r++) {
let rule: CSSStyleRule = cssRules[r];
Object.keys(rule.style).forEach(s => {
if (isNaN(Number(s)) && rule.style[s]) {
elem.style[s] = rule.style[s];
}
});
}
}
- Mike Zheng tradrejoe@gmail.com
answered Dec 4 '18 at 1:03
Michael ZhengMichael Zheng
123
Please see below typescript for re-applying css class again to an element to override parent container (usually a framework component) css styles and force your custom styles. Your app framework (be it angular/react, probably does this so the parent container css was re-applied and none of your expected effects in css-class-name is showing up for your child element. Call this.overrideParentCssRule(childElement, 'css-class-name'); to do what the framework just did (call this in document.ready or end of event handler):
overrideParentCssRule(elem: HTMLElement, className: string) {
let cssRules = this.getCSSStyle(className);
for (let r: number = 0; r < cssRules.length; r++) {
let rule: CSSStyleRule = cssRules[r];
Object.keys(rule.style).forEach(s => {
if (isNaN(Number(s)) && rule.style[s]) {
elem.style[s] = rule.style[s];
}
});
}
}
- Mike Zheng tradrejoe@gmail.com
answered Dec 4 '18 at 1:03
Michael ZhengMichael Zheng
123
edited Dec 4 '18 at 1:15
answered Dec 4 '18 at 1:03
Michael ZhengMichael Zheng
123
answered Dec 4 '18 at 1:03
Michael ZhengMichael Zheng
123
answered Dec 4 '18 at 1:03
Michael ZhengMichael Zheng
123
123
Can you explain why one should use typescript for such a simple requirement?
– Nico Haase
Dec 28 '18 at 7:15
add a comment |
Can you explain why one should use typescript for such a simple requirement?
– Nico Haase
Dec 28 '18 at 7:15
Can you explain why one should use typescript for such a simple requirement?
– Nico Haase
Dec 28 '18 at 7:15
Can you explain why one should use typescript for such a simple requirement?
– Nico Haase
Dec 28 '18 at 7:15
add a comment |
This got bumped to the top because of an edit ... The answers have gotten a bit stale, and not as useful today as another solution has been added to the standard.
There is now an "all" shorthand property.
#elementId select.funTimes {
all: initial;
}
This sets all css properties to their initial value ... note some of the initial values are inherit; Resulting in some formatting still taking place on the element.
Because of that pause required when reading the code or reviewing it in the future, don't use it unless you most as the review process is a point where errors/bugs can be made! when editing the page. But clearly if there are a large number of properties that need to be reset, then "all" is the way to go.
Standard is online here: https://drafts.csswg.org/css-cascade/#all-shorthand
answered Dec 28 '18 at 7:38
WayneWayne
3,83311623
add a comment |
This got bumped to the top because of an edit ... The answers have gotten a bit stale, and not as useful today as another solution has been added to the standard.
There is now an "all" shorthand property.
#elementId select.funTimes {
all: initial;
}
This sets all css properties to their initial value ... note some of the initial values are inherit; Resulting in some formatting still taking place on the element.
Because of that pause required when reading the code or reviewing it in the future, don't use it unless you most as the review process is a point where errors/bugs can be made! when editing the page. But clearly if there are a large number of properties that need to be reset, then "all" is the way to go.
Standard is online here: https://drafts.csswg.org/css-cascade/#all-shorthand
answered Dec 28 '18 at 7:38
WayneWayne
3,83311623
add a comment |
This got bumped to the top because of an edit ... The answers have gotten a bit stale, and not as useful today as another solution has been added to the standard.
There is now an "all" shorthand property.
#elementId select.funTimes {
all: initial;
}
This sets all css properties to their initial value ... note some of the initial values are inherit; Resulting in some formatting still taking place on the element.
Because of that pause required when reading the code or reviewing it in the future, don't use it unless you most as the review process is a point where errors/bugs can be made! when editing the page. But clearly if there are a large number of properties that need to be reset, then "all" is the way to go.
Standard is online here: https://drafts.csswg.org/css-cascade/#all-shorthand
answered Dec 28 '18 at 7:38
WayneWayne
3,83311623
This got bumped to the top because of an edit ... The answers have gotten a bit stale, and not as useful today as another solution has been added to the standard.
There is now an "all" shorthand property.
#elementId select.funTimes {
all: initial;
}
This sets all css properties to their initial value ... note some of the initial values are inherit; Resulting in some formatting still taking place on the element.
Because of that pause required when reading the code or reviewing it in the future, don't use it unless you most as the review process is a point where errors/bugs can be made! when editing the page. But clearly if there are a large number of properties that need to be reset, then "all" is the way to go.
Standard is online here: https://drafts.csswg.org/css-cascade/#all-shorthand
answered Dec 28 '18 at 7:38
WayneWayne
3,83311623
edited Dec 28 '18 at 7:44
answered Dec 28 '18 at 7:38
WayneWayne
3,83311623
answered Dec 28 '18 at 7:38
WayneWayne
3,83311623
answered Dec 28 '18 at 7:38
WayneWayne
3,83311623
3,83311623
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f946645%2fhow-to-ignore-parent-css-style%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
