Get some particular CSS elements

Let me explain. I have a css page that is stored in a table, it presents itself in this form:

. styleFloatCenter, form.styleFloatCenter,. focus {
   margin: auto;
   width: 70%;
}

All css is built like that, it is a norm. I need to recover for all my css "rules" the 2nd element like styleFloatCenter for my example.

An idea? Ty !

Edit : 2nd example :

. red, form.redColor,. focus {
   margin: auto;
   width: 70%;
}

Here i need redColor...

Answers


Try javascript regex -

var pattern = /,(.+),/;
var oneRule = ". styleFloatCenter, form.styleFloatCenter,. focus {\
 margin: auto;\
 width: 70%;\
 }"; //store one rule in it
var result = pattern.exec(oneRule);
alert(result[1]); //Your required value​

Can check it here. You can assign each rule one by one using loops. If you want to parse the whole css doc together then first use a pattern to search a rule and then second element


To read your stylesheet rules, use document.styleSheets. The following code lists the class names of the second selectors from all rules in all stylesheets on your page:

// for all stylesheets on the page
for(var i = 0; i < document.styleSheets.length; ++i) {
    var rules = document.styleSheets[i].rules || document.styleSheets[i].cssRules;

    // for all rules in this sheet
    for(var j = 0; j < rules.length; ++j) {

        // get the full selector string for this rule
        var selector = rules[j].selectorText;

        // get the second selector in the list
        var secondSelector = selector ? selector.split(",")[1] : null;

        // get the class name of that selector
        var secondSelectorClass = secondSelector ? secondSelector.split(".")[1] : null;

        console.log(secondSelectorClass);
    }
}

window.getComputedStyle(document.getElementsByClassName("styleFloatCenter")[0])

If you have an element on the page with that class, you can get its computedStyle using the code above. From there you can find any specific style you may be looking for.

By the way, you can't have a space between the dot and the selector name. . styleFloatCenter won't select elements with the class styleFloatCenter. It must be .styleFloatCenter without the space.

If you're just wanting the name of the second selector out of .styleFloatCenter, form.styleFloatCenter,.focus, you can simply use explode to split the list at the commas and select the second one.

$parts = explode(',', '.styleFloatCenter, form.styleFloatCenter,.focus');
echo $parts[1];

Need Your Help

getting confused with firebase,angular, node js

javascript angularjs node.js express firebase

I want file structure that angularjs + firebase follows.