CSS split selector

by Krzysztof Safjanowski

HTML

<ul data-css-selector='last'>
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
</ul>

CSS

ul > li.last {
    border: 1px solid #f00;
}
ul >li.nth-child-2 {
    border: 1px solid #0f0;
}

JavaScript

supportForAdvancedCSS($('[data-css-selector]'));

function supportForAdvancedCSS($collection) {
    var selectors;
    var $element
    $collection.each(function(index, element) {
        $element = $(element);
        selectors = $element.data('css-selector').split(',');
        $.each(selectors, function(index, selector) {
            $element.find(':' + $.trim(selector)).addClass(selector);
        });
        
    });
};