How to avoid CSS interference in an HTML page


Tags: javascript,html,css

Problem :

I'm building a script that will add some HTML code to the page. That HTML code has style, let say I added

<div class="myplayer">
</div>

The code was added using JavaScript, but I also add styling, through CSS

.myplayer {
 a_property: #fdfdfd;
}

Everything is fine. But wait, my script is expected to run on pages I don't have control over, someone while designing his pages put this code

.myplayer {
 another_property: crap;
}

or

* {
 that_property: crap;
}

That crap is now appearing on my script, because I'm assigining it. I could do in my CSS Class

.myplayer {
 iterate_over_all_properties: default;
}

but the number of properties is a little bit overwhelming and I need to study each one a part. How do I avoid that interference?



Solution :

Presumably you want to wipe out css on only the elements that are "yours". You can do this by applying a style that applies to elements of a particular class name, and all its children, using the wildcard. For instance:

.reset * {
border: 0 !important;
background: transparent !important;
/* etc */
}

Then you will typically have to make creative use of !important on your own css styles.

It's never pretty, but can generally be done.

Google "css reset".


    CSS Howto..

    css how to force to ul,ol to show numbers or disc, after reset the list style.?

    how to show like chat box for the div/p tag top left/right corners

    How can I archive this responsive design?

    How can my website store strings locally? [closed]

    How to bring up a div box while hovering over a span tag in a section?

    How to stop ReSharper removing spaces after css properties

    How do I keep a CSS hover rule applied when the mouse moves to the child element?

    How do I lay out my content divs in a similar manner to Facebook Timeline?

    How to make the click logo appear without a href in css/html?

    How do I vertically center an image whose size can change in a div?

    How to remove Left property when position: absolute?

    When I use
    • , how to let the element inside the li float left but the

    How to make Visual Studio stop “compiling” .js and .css files

    how to position a div for all screen resolutions

    How to get a JavaFX XYchart to work with user defined CSS?

    How to get chevron to align to center of link tab

    How to draw a horizontal line between two circles with css?

    Show only small portion of an image [closed]

    How to remove critical CSS from the main.css file

    How to exclude CSS file from Visual Studio intellisense?

    How to handle an image inside bootstrap column?

    Window resize shifts buttons to the bottom of the page. How to fix the css in this page?

    How can I create this simple form example in HTML?

    css hover element to show child, how can I keep the hover css on the parent when I mouseover the child?

    CSS: How to align text to baseline of height-adjusted input element?

    How to style the entire first row of a table in css

    How to completely show hide tabs on onclick event in HTML CSS Javascript

    How to make dynamic slideshow using php, mysql, css and html?

    How can I get facing html elements to left-align and right-align, respectively, preferably using CSS?

    How to add style/css to a simple jQuery accordion?