How do I take multiple CSS files with the exact same selectors and force one to be used only on a specific div?

Tags: css,jquery-ui

Problem :

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.

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 .ig

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)

    CSS Howto..

    how to add class to razor form and give padding?

    How do I center these three blocks horizontally?

    How to formatting a simple
      in columns and bolding the first item on its own line

    How to centre fluid image and a caption using CSS Flexbox?

    How do I wrap a long string in a fixed-width container with CSS?

    How can I get my divs to process separately?

    CSS float property shows no height?

    How to customize responsive columns and inputs fields in twitter bootstrap?

    How to center checkbox vertically in a table-cell?

    How to create a multi colored circle in html and css

    I have 3 divs in one row, how do I get the middle div to stay an exact width while the left and right div shrink in as the screen resizes smaller?

    How to set backround image in css

    How to set the maximum height of CSS tables?

    How to display Highcharts in rows (5)

    How to detect browser support for :after and :before

    How to have dots as horizontal separator with inline text like in this screenshot?

    How can I add spaces between two lines using CSS?

    ExtJS - How to customize buttons?

    How add symbol in CSS for element?

    gulp-cssmin: How to change relative URLs in minified CSS

    How can I get a rounded rectangle graphic to span across all columns within an ASP.NET GridView header row?

    How do you add more than one css class to an using image_tag?

    How to prevent menu from closing when losing mouse focus?

    external css loaded but not aplied to html - php codeigniter ssl - how to change css mimetype = text/html to text/css

    How to align a horizontal list to the center in css

    Icon with overhead label - how to get both to respond to hover, with CSS?

    angular ngShow with animate.css

    Show or hide div based on selected value

    How to place rectangle inside image and make hover animation for it in CSS?

    How to make element instantly go back to initial position after CSS animation end?