How do I take multiple CSS files with the exact same selectors and force one to be used only on a specific div?
I have a website that uses jQuery UI (and specifically, the jQuery UI themes) for styling. I have added the Infragistics Ignite UI grid control to this website. The Ignite grid does not look very good using the jQuery UI theme that I have chosen, but looks really good using the default theme provided with the grid.
Unfortunately, the grid theme also uses the jQuery UI theme selectors, so I have a problem. I have two CSS files that define the exact same selectors. One I want to apply to the entire page. The other I want to apply only to specific divs (i.e. a div that wraps the Ignite grid).
Is there a simple way to force a CSS file to only apply to a single HTML element? For now, I've put
div.ig in front of all the selectors in the Ignite style sheet, but that is error-prone busy work that needs to be redone everytime an update is applied, so I don't really like that solution.
There is no way of doing that without modifying one of the jQuery UI themes.
Here's I think the simplest way of modifying the Ignite file at each update:
- strip the file from comments (thus the minified file is OK)
- search "
}" and replace by "
} .ig(space)" (without the quotes of course)
- add "
.ig(space)" at the beginning of the file, remove it at the end
- done, each selector begins with a parent
It works only if there are no at-media rule and their double closing braces (and beware of @import, @charset and @font-face at the beginning, just in case)