how to calculate css rules priority in Javascript?


Tags: javascript,css

Problem :

I have created this code to calculate css rules priority

var selectorText = "body";
A = selectorText.match(/#/gm); // id
A = !A ? 0 : A.length;
B1 = selectorText.match(/\\./gm); // class
B1 = !B1 ? 0 : B1.length;
B2 = selectorText.match(/[[]/gm); // attribute selector
B2 = !B2 ? 0 : B2.length;
B3 = selectorText.match(/[\\w\\d_\\s^]:(?!:)/gm); // pseudo třída
B3 = !B3 ? 0 : B3.length;
B = B1 + B2 + B3;
C1 = selectorText.match(/::/gm); // pseudo element
C1 = !C1 ? 0 : C1.length;
C2 = selectorText.match(/\\w+[$\\s#\\.:\\[]/gm); // element
C2 = !C2 ? 0 : C2.length;
C = C1 + C2;
A *= 10000;
B *= 100;
alert(C)

There must not be more than 100 matches (A, B or C) in a selector. For some reason the result of C is 0 (but I use "body" selector). Can you suggest how to correct the last match? Also do you see any mistakes in the code?

Note:

The original question stated just "body" selector, but I think about any selector or multiple selectors like this: "div#menu ul li, div#id, div.class" the selector can contain pseudo-classes, pseudo-elements, attribute selectors. In the case of C2 regex, I am trying to find count of elements which here in the last string is 5 elements total (then C2 should be 5).



Solution :

selectorText does not contain ::, C1 = selectorText.match(/::/gm); should return null; C1 = !C1 ? 0 : C1.length; returns 0; C2 = selectorText.match(/\\w+[$\s#\\.:\\[]/gm); returns null, C2 = !C2 ? 0 : C2.length; returns 0; C = C1 + C2; is equal to 0; that is 0 + 0 = 0


The original question stated just "body" selector, but I think about any selector or multiple selectors like this: "div#menu ul li, div#id, div.class" the selector can contain pseudo-classes, pseudo-elements, attribute selectors. In the case of C2 regex, I am trying to find count of elements which here in the last string is 5 elements total (then C2 should be 5)

You can use .split() with RegExp /,|\s/ to split multiple selectors at , character; .map(), .filter(Boolean) to remove empty string, .match() with RegExp /^[a-z]+(?=[.#:\s]|$)/i to match element.

var selectorText = "div#menu ul li, div#id, div.class";
C2 = selectorText.split(/,|\s/).filter(Boolean)
     .map(el => el.trim().match(/^[a-z]+(?=[.#:\s]|$)/i)[0]);
console.log(C2);


    CSS Howto..

    CSS div element - how to show horizontal scroll bars only?

    Flex - understanding how to properly reference an image in a library project css file

    How do I replicate this website in terms of responsiveness using only css?

    WordPress admin stylesheet not showing images

    How to get the authored style properties of an element?

    How to mark up speedometer/gauge in HTML/CSS?

    How to make this page less cluttered with css and html [closed]

    CSS: Is there a limit on how many classes an HTML element can have?

    How to set gulp autoprefixer that it will be prefix css when I save my project

    How do you center a picture AND left align text that is touching said picture? HTML5

    How do I add a CSS class to a BoundField, so I can find it with jQuery?

    How to render css file from url in to the webview in android

    How can I center a div within another div?

    How can I make this section of my webpage responsive? [closed]

    How to avoid background image tile when browser window resizes

    how to spread small image file in background and it should scroll with other elements

    How to change the input field's text color in MaterializeCSS?

    How to combine html, js and css from fiddle

    How do I stop my :after content from blocking my anchor?

    How to set the CSS of an img inside a li inside a ul inside a class?

    CSS visited links- how to recognize visited links which visited by clicking through my app?

    showing
    inside :before element

    How to switch tabs and change css class on click using Angular2?

    How to create a menu 'toolbar' like on the default Google homepage?

    How do I overlap PNG images for a “build your own t-shirt” product display page - javascript/css/asp

    How to change CSS display property using an anchor tag?

    How to change background color of elements every 5s using jquery? [duplicate]

    CSS - How to add a second background image

    How to - dynamically - change link text color in jQuery Mobile?

    How to create border corner spacing in CSS