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 make elements appear under a
      in Firefox & IE8?

    html css - how to create multiple column list?

    How do I force an image to be responsive using CSS so it stays in the same position?

    CSS & Button: How to override native CSS of html buttons element?

    How to change the Menu colour when selected?

    How do I make my div scale to larger than it's original size using css animation?

    How to make vertical lines between list items using CSS?

    How can I create an overlay that stays in DOM as opacity 0 but doesn't prevent content from being clickable?

    How do you solve this Chrome button border bug?

    Nested CSS: How to get to the child?

    How to not apply CSS file on a
    ? (Without changing the original CSS file.)

    How to conditionally add css properties in jquery (coffeescript)

    How can I send a Jquery var to be used in a CSS property

    How to print data from left to right in html using css

    :hover property overriden after jquery effect, how to get it back?

    How to hide and show a
    onclick when there's already an action for click?

    How to select the table heading of the first row in table using css selectors?

    how to change html content text

    using css

    how to fix a display difference between chrome and firefox for css relative position?

    How to get these tables stacked on top of each other?

    CSS - How to crop an image to a square, if it's already square then resize it

    how to interactively toggle CSS sheets(s) on a webpage for testing/learning purposes?

    How to put a
  • over an
    • How to include child div into parent div automatically?

      nth-child's child is not shown

      How to align div in body to stay with specific height and width

      How to deal with `rowspan` and background colors within a table?

      how to access the class css properties from an attribute directive associated with the same element

      How to change a css element based on other element

      How to revert to original CSS?