How to avoid third party CSS to affect current CSS? [closed]


Tags: javascript,jquery,html,css3

Problem :

In my site, I'm changing a style of DIV using Jquery/Javascript. The same DIV style is later changed by third party js library. Is there a way to avoid the third party style changes. I'm not allowed to use CSS to override, as CSS is also written by different source.



Solution :

// your css
//// here use id and !important(hack)
#id1{ 
 color: blue !important;
}

// third party css class
.class1{
 color: red;
}

// your element
<input type="text" class="class1" id="id1"/>

Output: The color will be blue. Your css will win.

Read more about Specificity in css to understand better.

Note: Id is more specific than class.


    CSS Howto..

    how can i use css selector to give style only to a first div between two divs of the same kind?

    How can I center the table in the page?

    How to show “next”, “previous” buttons on an image (on mouseover)?

    how to apply css class condtionally in angularjs

    How can I use the CSS pseudo-element :before{ content: '' } to affect an

    Show just cursor (caret) but hide the letters in input

    How to return a “text” in css less?

    how to make nested flexboxes work

    How to manually apply styles from particular style sheet to an element?

    How to Apply css class on runTime

    How to recursively remove CSS classes

    How do you change the appearance of a button in javascript?

    How to Mask Images with Dynamic Sizes to Shapes?

    How to select loose text between tags

    How to get and set CSS class in TinyMCE editor?

    How can I use javascript, or css to make my text somewhat transparent?

    How can I make a fixed background image not stay fixed on scroll?

    Slide up/down effect with ng-show and ng-animate

    how to indent HTML forms on modals [closed]

    CSS: How to center text with surrounding borders

    How to choose font different font-weight? use bolder one or just font-weight?

    How to catch div position and reposition it later (on MAC)

    How to adjust responsive behaviour of menu bar's elements

    How to fix CSS background position

    How to apply @media for css attribute that are set via jquery

    Third-Level Menu Items Are Always Showing

    how do I apply a class to the header cell for a column in slickgrid

    Rails - how to get absolute url of an asset in css.erb

    How to hide old styled version of select option? [duplicate]

    JavaFX: How not to fill background outside the rounded borders of a Label within a ScrollingPane