How to dynamically create a css style rule that is overridable by earlier rules


Tags: javascript,css,dom

Problem :

I have been using jss in my project to do dynamic styles. This has worked great for the most part, but I want to do something it seems to not help with.

I want to be able to create a set of main style rules first, then create a set of default style rules that can be overridden by the main style rules if they conflict. Example:

<div class="mainClass1 defaultClass1">text</div>
<script>
jss.set('.mainClass1', {
  color: 'red'
})

jss.set('.defaultClass1', {
  color: 'green'
})
</script>

I want the outcome to be that the text is red, but the way jss operates, the text comes out green. I was hoping I could somehow create two dynamic stylesheets, the "default" sheet being first, and the "main" sheet being second (so that main overrides default). Is this possible?

Update - I confirmed a technique that works with raw javascript:

var styleNode = document.createElement('style');
styleNode.type = 'text/css';
styleNode.rel = 'stylesheet';
document.head.appendChild(styleNode);
//styleNode.sheet.insertRule("#A" + ' { color:green; }', 1);

var styleNode2 = document.createElement('style');
styleNode2.type = 'text/css';
styleNode2.rel = 'stylesheet';
document.head.appendChild(styleNode2);
styleNode2.sheet.insertRule("#A" + ' { color:green; }', 0);
styleNode.sheet.insertRule("#A" + ' { color:red; }', 0);

The element with id 'A' remains green even after the red style is added on the earlier stylesheet. Now I'm just wondering if I can do this with jss or if I need to roll something of my own.

Why does this not work?

var jss1 = jss.forDocument(document)
var jss2 = jss.forDocument(document)

jss2.set('#A', {
    color: 'green'
})
jss1.set('#A', {
    color: 'red'
})


Solution :

Allllright, I figured out how to do it with jss:

<div id="a">A div</div>
<script>
    var jss1 = jss.forDocument(document)
    jss1.defaultSheet = jss1._createSheet()
    var jss2 = jss.forDocument(document)
    jss2.defaultSheet = jss2._createSheet()

    jss2.set('#A', {
        color: 'green'
    })
    jss1.set('#A', {
        color: 'red'
    })
</script>

I found out jss lazily creates its sheet. So if you want to ensure the order of the stylesheets, you need to create them up front with _createSheet.


    CSS Howto..

    how to change the css of default select2 placeholder color?

    How to change inline css using jquery in joomla

    How To Prevent Transition Animation To Run Page Load

    How to pin the menu to the upper part of the screen?

    HTML CSS Form - How to center the form on the page?

    How to shrink the menu when mouse hover on a link using jquery

    How do I style jQuery UI tabs vertically with a correctly themed border?

    How to make .less files to have .css syntax highlight in Vim?

    How to display html with css stylesheet in TextView?

    JavaScript: How to get a dynamically created element's width?

    how to use css button to post method in a form?

    Css, text shadow - How to get it overflow off the div

    How to fade out and fade in the divs sequentially

    CSS , 3 three columns, how to make the middle liquid? [closed]

    how can I do this space between tables? [closed]

    How show button hovering above an image or pressing over it? [closed]

    How to make a pure css based dropdown menu?

    How to style a png icon with CSS?

    Using html5 canvas as a background, how to position a youtube embed on top of it using css to be resolution independent?

    How should I crop the image at client side using jcrop and upload it?

    How to draw image dynamically on a canvas line between two cells

    CSS Positioning: How to make 2 overlapping divs and then 1 more div to the right of the overlapping divs

    How do I lay out my content divs in a similar manner to Facebook Timeline?

    How to add an orange background to top of page

    how to save style-css values for Later use then Reload those values back

    How to create a dynamic-width arrow in CSS?

    How do I add a border to an (8 point star) css shape?

    How do I add a dropdown menu to my css menu?

    How to make links in line

    How to preload style image to use it when server is down?