JSFiddle - React, Tailwind, and code Playground

HTML

<div><code>DIV</code>s on this page have an original CSS rule: <code>div:hover {background: #00f;}</code>. However, looks like JS has overridden this rule...</div>

<p></p>

CSS

div:hover {
  background: #00f;
}

JavaScript

var	changeRule = function(selector, property, value){
    var rule = _.chain(document.styleSheets)
        .map(function(sheet){return _.flatten(sheet.cssRules)})
        .flatten()
        .unique()
        .find(function(rule){ return rule && rule.selectorText && (rule.selectorText.toLowerCase() === selector.toLowerCase())})
        .value()
    
    if (rule){
        rule.style[property] = value;
    } else {
        throw 'selector not found: ' + selector;
    }
};

changeRule('div:hover', 'background', '#f00');