load and apply same css class from two different files on two different elements

Question

Provided I have two different css files, each containing a definition of the same css class (Eg. .mainDiv {} ) but each class would have different properties, how would I be able to apply them to two different divs in my HTML code (say with ids myMainDiv1 and myMainDiv2)?

I realize this is no longer an association between div element ids and css classe names but I would like to know if it is possible somehow to parse/read each css file - through JavaScript - and apply the rules dynamically for each of my divs.

So I would in no way want to make changes to the css files; I can have as many as needed but they all need to have the very exact same class names (Eg. mainDiv); through JavaScript - if possible - I can apply the styles for each of my divs.

In order to read the content of the css files you can style them with javascript it self. Unless you dont know the css content or the content is too large. Or you can use a css preprocessor like sass or less to import the styles and call them different name, then apply to the divs — Abel D, Nov 24 '15 at 17:55
Yep, that would be ideal in this case. I'd like to try not using sass though, just lightweight JavaScript. Any browser compatibility known-issues regarding reading/storing css rules from a css file, then applying them to a div element, I should be aware of in this direction? — Sonofkyuss, Nov 24 '15 at 18:10

score 1 · Accepted Answer · answered Nov 24 '15 at 18:03

It is really not a good idea to try and parse your CSS using javascript, instead just use CSS for what it's very good at, selectors.

The best option is to prefix every rule in each file. So if you have light-theme.css and dark-theme.css then every rule in light-theme.css would start with something like .light-theme (and the same goes for dark-theme.css -> .dark-theme).

Once each rule is prefixed accordingly you can include both files and just add a class based on which CSS file you want to take effect.

/* Shared styles */
#content {
  height: 400px;
  width: 400px;
}
#content > div {
  width: 200px;
  float: left;
}
ul {
  list-style: square inside;
}
li {
  height: 40px;
}



/* light-theme.css */
.light-theme li {
  color: #339;
  background-color: #fff;
}



/* dark-theme.css */
.dark-theme li {
  color: #ccf;
  background-color: #333;
}

<div id="content">
  <div class="light-theme">
    <h2>Light</h2>
    <ul>
      <li>Red</li>
      <li>White</li>
      <li>Blue</li>
    </ul>
  </div>
  <div class="dark-theme">
    <h2>Dark</h2>
    <ul>
      <li>Alpha</li>
      <li>Beta</li>
      <li>Gamma</li>
    </ul>
  </div>
</div>

Thanks @JimmyBoh That would be ideal except I am going to have a ton of css rules in each file so I would like to avoid having the end-user rename each rule (by adding a prefix like suggested, or suffix). Not proficient in css but isn't there a way to this problem - as per your suggestion above - to only have to rename once, in one specific place in each css file (provided there are 50 rules) and avoid adding a prefix to each rule? — Sonofkyuss, Nov 24 '15 at 18:07
You could switch to LESS or SASS. They are CSS preprocessors that provide additional language features for things like variables, mixins, and most importantly (to you) [nested rules](http://lesscss.org/features/#features-overview-feature-nested-rules). This means you can wrap the entire file instead of changing every single rule. When the CSS is generated it will include the prefixed values. It is more complex, but it really is the answer you are looking for. (You could even just use it once to generate a brand new CSS file with all the prefixes set). — Jim Buck, Nov 24 '15 at 18:24

score 0 · Answer 2 · answered Nov 24 '15 at 17:53

0

You'd have to override the incorrect styles with more specific selectors.

#myMainDiv1.mainDiv { ... }
#myMainDiv2.mainDiv { ... }

answered Nov 24 '15 at 17:53

isherwood

58,414
16
114
157

Thanks @isherwood. What if I can't do that and I'd only have .mainDiv {} in each CSS file? I was thinking maybe about a solution where I'd append the style sheet to the HEAD tag through JS, read the mainDiv class and store it in JS (using a solution such as this [one](http://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript)) then removing the style sheet from HEAD and adding the second one, then repeating the same step. Not 100% sure that would be possible, any suggestions/thoughts? – Sonofkyuss Nov 24 '15 at 17:57

score 0 · Answer 3 · answered Nov 24 '15 at 17:55

You can give multiple classes to an element. If you are using a class mainDiv

<div class="mainDiv firstMainDiv"></div>
<div class="mainDiv secondMainDiv"></div>

now the styles given with class name .mainDiv will apply on both. But if you want to give some styles specifically to first div then you can use both classes

.mainDiv.firstMainDiv {}

this styles will apply only in first div.

load and apply same css class from two different files on two different elements

3 Answers3