JSFiddle - React, Tailwind, and code Playground

by Yair Even Or

HTML

<style type="text/css" id='myStyle'>
    /* this rule will be overwritten */
    ul > li:nth-child(3n){background:red}
</style>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul{ list-style:none; }
li{ width:100px; height:100px; background:blue; display:inline-block; margin:10px; }

JavaScript

var styleTag = document.querySelector('#myStyle');
// the style sheet in the style tag
var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet,
    rules = sheet.cssRules ? sheet.cssRules : sheet.rules;

if( sheet.cssRules ){
    sheet.deleteRule(0);
    sheet.insertRule("ul > li:nth-child(2n){background:red}", 0);
}
else{
    sheet.removeRule(0);
    sheet.addRule("ul > li:nth-child(2n)", 'background:red', 0);
}