Reset the style of a HTML element

Question

I have a webpage with elements, styles (imported and inline)

I want to reset the style for a specific element.

Example:

HTML:

<div class="parent">
    This is the parent div, it colors the <strong>strong in red</strong>
    makes a <small>small underlined</small>
    <h4>sets a margin-left 10px for a H4</h4>
    and many other stuff<br><br>
    <div class="child">
        this is the child element<br>
        here a <strong>strong should not be red</strong><br>
        <small>small should not be underlined</small>
        <h4>H4 should not have a margin-left</h4>        
        and so on...
    </div>
</div>

CSS:

.parent strong{
    color:red;
}
.parent small{
    text-decoration: underline;
}
.parent h4{
    margin-left: 10px;
}

I want the child div to ignore the styles coming from his parents, including the html element

Here is an illustration of my example

The styles I gave here are just examples, there are much more
I cannot modify the parent CSS, is being dynamically generated
My child div is injected in the page, I can also inject any CSS I want
I cannot know in advance the content of the parent CSS

The only solution I found so far is including the child element in an Iframe, but is really really ugly!!

Any one can help how to achieve this? A JS solution is also acceptable.

You can't reset to defaults automatically the inherit styles from the parent. You have to overwrite them manually unfortunetely — Vangel Tzo, May 29 '14 at 11:38
Either you have to follow http://jsfiddle.net/WRDft/2/ or by using jquery/Javascript you can reset the css. You want solution in Javascript/Jquery ? — Jayesh Goyani, May 29 '14 at 11:40
#jayesh-goyani **I cannot modify the parent CSS, is being dynamically generated** Yes, a Javascript/JQuery solution would be very good — ilyes kooli, May 29 '14 at 11:52

score 0 · Answer 1 · answered May 29 '14 at 11:53

0

.child strong{
    color:pink !important;
}

1.You adjust the injecting code css via !important.

2.Even though you can't predict the css of the parents you can only have some basic CSS thing for your injected code.

Example

answered May 29 '14 at 11:53

Kawinesh S K

3,148
1
16
29

1

`!important` is unnecessary, usually bad practice and can be avoided here. `.child strong` will override `.parent strong` anyway if it's included afterwards. – James Donnelly May 29 '14 at 11:54
@JamesDonnelly ya i know it but as of the question concern i am not aware of when new code is being injected. – Kawinesh S K May 29 '14 at 11:56
this is for the color, what if .parent strong has a font-size, a border, a margin... Should override all possible css properties??? – ilyes kooli May 29 '14 at 11:58
@skafandri since you are injecting something inside an already existing code there is no other go for you except to override the CSS old properties. – Kawinesh S K May 29 '14 at 12:01
Unfortunately this is not possible, the parent CSS file is few thousands of lines -_-, and even if I manage to override all, it might change anytime! – ilyes kooli May 29 '14 at 12:03
@skafandri y you worry about the parent css if you can control all the possible css property of your injected content. – Kawinesh S K May 29 '14 at 12:05

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

You can use css immediate child selector '>'

in your example

.parent>h4{
    margin-left: 10px;
} 


.parent>strong{
    color:red;
}

check the updated demo

http://jsfiddle.net/WRDft/11/

Refer: http://msdn.microsoft.com/en-in/library/ie/aa358819(v=vs.85).aspx

CSS '>' selector; what is it?

edited May 23 '17 at 12:27

Community

1
1

answered May 29 '14 at 11:57

Miqdad Ali

6,129
7
31
50

I cannot use css immediate child selector! – ilyes kooli May 29 '14 at 11:59

Ryan Brewer · Answer 3 · 2014-05-29T12:35:22.100

If I am understanding you correctly and if you know what content is being injected into your child div then the JQuery solution is very simple:

$(".child strong").css({"color":"black"});
$(".child small").css({"text-decoration":"none"});
$(".child h4").css({"margin-left":"0"});

The JQuery code can then be wrapped in any sort of function you desire.

Here is your fiddle with the JQuery added. Hope that helps.

Note: the JQuery selector - for example: $(".child strong") - can be as specific or as general as you like and you can add as many css rules as you like by using a comma separated list like this:

$(".child strong").css({"color":"black", "font-weight":"bold", "text-decoration":"underline", etc, etc});

score 0 · Answer 4 · edited May 23 '17 at 11:50

0

This question has already been asked and discussed.

There is no way to blanket clear styles but there are work arounds.

Reset/remove CSS styles for element only

edited May 23 '17 at 11:50

Community

1
1

answered May 29 '14 at 12:14

Tristanisginger

2,181
4
28
41

I tried that solution, but it freezed my browser (tried on FF and Chrome) because I had to add '*' selector since my element has many other nested elements inside – ilyes kooli May 29 '14 at 12:18

score 0 · Accepted Answer · answered May 29 '14 at 12:37

0

Thank you all for your thoughts guys, unfortunately, the best way I managed to achieve this is by wrapping my content inside an IFrame

Advantage: Immediate and easy reset
Disadvantage: I cannot manipulate the elements outside of the IFrame

answered May 29 '14 at 12:37

ilyes kooli

11,959
14
50
79

Reset the style of a HTML element

5 Answers5