CODEWITHSUNDEEP
jquerycss
user554180
user554180

Reputation:

How to keep child elements from inheriting any parent styles?

Basically I am including my content inside a parent page. I need to make sure I am not inheriting any of the styles set in the parent.

I want to make sure that the parent still has those styles applied to the content but for my content which is loaded via Ajax call my styles are applied.

Upvotes: 0

Views: 431

Answers (2)

Ninad Ajnikar
Ninad Ajnikar

Reputation: 173

Can you try the following code which would reset the styles to blank... you could probably add your own too...

$('body').find("*").each(function() {
    $this = $(this);
    if($this.attr('style').length > 1){
        $this.attr('style','');
    }
})

Upvotes: 1

jfriend00
jfriend00

Reputation: 707326

It's very difficult to override every single style setting from parents. You'd have to do something like a style reset, but if you were doing it via CSS, you'd even have to make sure you have enough specificity to make sure you're overrides apply.

Your best bet might be to use an iframe which gets a totally clean style context.

If you know which style values are an issue, you could manually set every one of those on your own content container, but if you don't know, you'd have to cover every single style attribute there is (which would be very inefficient and not very practical).

Upvotes: 0

Related Questions