Is there any JavaScript library for parsing css rules for use in jQuery?

Question

The goal is to pollyfill css3 nth-child pseudo-class with jQuery. So I need to parse css rules and reapply them with jQuery for older browsers that do not support nth-child directly from css. So I wrote some code, but I am pretty sure that something similar should be already present for example at github. May be someone already encountered such a problem? Here is my code:

        // if ie7 or ie8
        if (!$.support.leadingWhitespace) {         

            var aStyleSheetList = document.styleSheets,
                aRules = [],
                current = '',
                aSelectors = [];

            for (var i = 0; i < aStyleSheetList.length; i++) {
                aRules = aStyleSheetList[i].cssRules || aStyleSheetList[i].rules;
                for (var j = 0; j < aRules.length; j++) {
                    current = aRules[j];
                    if (current.selectorText && current.selectorText.indexOf('nth-child') !== -1) {
                        aSelectors.push([current.selectorText, current.cssText.substring(current.cssText.indexOf('{') + 1, current.cssText.indexOf('}'))]);
                    }
                }
            }

            var jqCssObject = {},
                declarations = [],
                keyValuePair = [];

            for (var k = 0; k < aSelectors.length; k++) {
                declarations = aSelectors[k][1].split(';');
                for (var m = 0; m < declarations.length; m++) {
                    keyValuePair = declarations[m].split(':');
                    jqCssObject[keyValuePair[0]] = keyValuePair[1];
                }
                $(aSelectors[k][0]).css(jqCssObject);                   
            }

        }

Why don't you just use a jQuery selector? There's also css3pie.com — Blender
– Blender, Commented Jun 2, 2013 at 19:29
Yes. But I am too lazy to edit js file every time I add some nth-child to my css. And it will be a lot of code. Thanks for css-pie link. — paperstreet7
– paperstreet7, Commented Jun 2, 2013 at 19:31

dsgriffin · Accepted Answer · 2013-06-02 19:32:38Z

1

If you want to use pseudo-selectors such as nth-child in older browsers, one option is to use Selectivizr:

"Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8."

As you're already using jQuery, all you have to do is include the Selectivizr <script> in your page and you will have compatibility for various pseudo/attribute selectors in older browsers.

answered Jun 2, 2013 at 19:32

dsgriffin

68.8k17 gold badges141 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

paperstreet7 Over a year ago

Can I dynamically load selectivizr from cdn into the script? I maen will it work? Cause I've tried to use selectivizr many times before, and it seems to me that it's very hard to get it work.

dsgriffin Over a year ago

@paperstreet7 It shouldn't be too hard, this tutorial will help - blog.reybango.com/2010/09/08/…

paperstreet7 Over a year ago

No. Selectivizr is not working for me. And as I see I am not the only one that have issues with selectivizr.

dsgriffin Over a year ago

@paperstreet7 Who else is? It takes me < 5 minutes to get it to work whenever I use it

Collectives™ on Stack Overflow

Is there any JavaScript library for parsing css rules for use in jQuery?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related