JSFiddle - React, Tailwind, and code Playground

by HerrSerker

HTML

<div id="a">a</div>
<div id="b"><p>b</p></div>

<div id="c"><p>c</p></div>

CSS

#c! > p {
    color: red;
}
#b! > p, 
#a! {
    border: 1px solid gold;
    color: silver;
    width: 100px;
    height: 100px;
    padding: 10px;
}

JavaScript

/** cssParentSelector 1.0.12 | MIT and GPL Licenses | git.io/cssParentSelector */

(function($) {
    $.fn.cssParentSelector = function() {
        var k = 0, i, j,

             // Class that's added to every styled element
            CLASS = 'CPS',
            stateMap = {
                hover: 'mouseover mouseout',
                checked: 'click',
                focus: 'focus blur',
                active: 'mousedown mouseup',
                selected: 'change',
                changed: 'change'
            },

            attachStateMap = {
                mousedown: 'mouseout'
            },

            detachStateMap = {
                mouseup: 'mouseout'
            },

            pseudoMap = {
                'after': 'appendTo',
                'before': 'prependTo'
            },

            pseudo = {},

            parsed, matches, selectors, selector,
            parent, target, child, state, declarations,
            pseudoParent, pseudoTarget,

            REGEXP = [
                /[\w\s\.\-\:\=\[\]\(\)\~\|\'\*\"\^#]*(?=!)/,
                /[\w\s\.\-\:\=\[\]\(\)\~\|\,\*\^$#>!]+/,
                /[\w\s\.\-\:\=\[\]\'\,\"#>]*\{{1}/,
                /[\w\s\.\-\:\=\'\*\|\?\^\+\/\\;#%]+\}{1}/
            ],

            REGEX = new RegExp((function(REGEXP) {
                var ret = '';

                for (var i = 0; i < REGEXP.length; i++)
                    ret += REGEXP[i].source;

                return ret;
            })(REGEXP), "gi"),

            parse = function(css) {


                // Remove comments.
                css = css.replace(/(\/\*([\s\S]*?)\*\/)/gm, '');
                if ( matches = css.match(REGEX) ) {

                    parsed = '';
                    for (i = -1; matches[++i], style = matches[i];) {

                        // E! P > F, E F { declarations } => E! P > F, E F
                        selectors = style.split('{')[0].split(',');

                        // E! P > F { declarations } =>...