Limit an external CSS sheet to a single div

0

If at the time of designing my page I find that to use an external javascript library, such as a carousel image gallery, it needs to implement a CSS stylesheet, but these styles make other aspects change of the page, how can I easily limit all that sheet to a single div, without modifying each and every one of the selectors on the page? I ask this because I happened to have two external libraries, each one needed to link a CSS sheet of its own, but these were stepped on each other, thus generating a malfunction of the plugins.

    
asked by Nacho Gonzalez Ampudia 10.11.2018 в 20:15
source

1 answer

0

In the generic component of the first plugin, give it an identifier or class that is different from the one you put in the second plugin.

JAVASCRIPT

<div class="plugin-generico-uno"/>
<div class="plugin-generico-dos"/>

Now you only have to modify the .css file of each plugin so that it only affects your environment, creating a wrapper.

CSS PLUGIN 1

.plugin-generico-uno{
  // el contenido css que este plugin tenía antes
}

The same for plugin 2.

    
answered by 14.11.2018 в 14:54