ℹ️ Select 'Choose Exercise', or randomize 'Next Random Exercise' in selected language.

Choose Exercise:
Timer 00:00
WPM --
Score --
Acc --
Correct chars --

CSS Selector Specificity Calculator

CSS

Goal -- WPM

Ready
Exercise Algorithm Area
1function calculateSpecificity(selector) {

2let specificity = [0, 0, 0]; // [ID, Class/Attribute/Pseudo-class, Element/Pseudo-element]

3

4// Helper to parse complex selectors (simplified for this example)

5function parseComplexSelector(complexSelector) {

6const parts = complexSelector.split(' ');

7for (const part of parts) {

8parseSimpleSelector(part);

9}

10}

11

12// Helper to parse individual selector parts

13function parseSimpleSelector(simpleSelector) {

14if (simpleSelector === '*') {

15specificity[2]++; // Universal selector

16return;

17}

18

19// IDs

20if (simpleSelector.startsWith('#')) {

21specificity[0]++;

22return;

23}

24

25// Classes, Attributes, Pseudo-classes

26if (simpleSelector.includes('.') || simpleSelector.includes('[') || simpleSelector.includes(':')) {

27// This is a simplification; a real parser would be more complex.

28// For example, ':not()' contains other selectors.

29// We'll count each '.' or ':' as contributing to the second part.

30for (let i = 0; i < simpleSelector.length; i++) {

31if (simpleSelector[i] === '.' || simpleSelector[i] === '[' || simpleSelector[i] === ':') {

32specificity[1]++;

33}

34}

35return;

36}

37

38// Elements and Pseudo-elements

39// Assume anything else is an element or pseudo-element

40specificity[2]++;

41}

42

43// Handle inline styles as a special case (highest specificity)

44if (selector.startsWith('inline-style')) {

45return [1, 0, 0]; // Representing inline styles

46}

47

48// Basic parsing - assumes a single selector for simplicity

49// A real-world scenario would need to handle combinators (>, +, ~)

50parseComplexSelector(selector);

51

52return specificity;

53}

54

55// Example Usage:

56// console.log(calculateSpecificity('div.my-class#my-id')); // [1, 1, 1]

57// console.log(calculateSpecificity('p:hover')); // [0, 1, 1]

58// console.log(calculateSpecificity('*')); // [0, 0, 1]

59// console.log(calculateSpecificity('body > div')); // Simplified: [0, 0, 2]
Algorithm description viewbox

CSS Selector Specificity Calculator

Algorithm description:

This CSS algorithm calculates the specificity of a given CSS selector. Specificity determines which CSS rule applies to an element when multiple rules target it. It's crucial for understanding CSS cascade and debugging styling issues. The algorithm breaks down selectors into IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements, assigning points to each category.

Algorithm explanation:

The `calculateSpecificity` function takes a CSS selector string and returns an array representing its specificity score. The score is composed of three parts: IDs, Class/Attribute/Pseudo-class, and Element/Pseudo-element. IDs contribute the most (e.g., `[1,0,0]`), followed by classes, attributes, and pseudo-classes (e.g., `[0,1,0]`), and finally elements and pseudo-elements (e.g., `[0,0,1]`). Inline styles are handled as a special case with the highest possible specificity. The function iterates through the selector, identifying these components using simple string checks. Edge cases like the universal selector `*` are handled. The time complexity is roughly O(N) where N is the length of the selector string, as it involves a single pass. Space complexity is O(1) as it only uses a fixed-size array for specificity.

Pseudocode:

FUNCTION calculateSpecificity(selector):
  INITIALIZE specificity_score = [0, 0, 0] (ID, Class/Attr/Pseudo, Element/Pseudo-element)

  IF selector is 'inline-style':
    RETURN [1, 0, 0]
  END IF

  SPLIT selector into parts based on spaces (for combinators)
  FOR EACH part IN parts:
    IF part starts with '#':
      INCREMENT specificity_score[0]
    ELSE IF part contains '.' OR '[' OR ':':
      // Simplified: count each occurrence for the second score part
      FOR EACH character IN part:
        IF character is '.' OR '[' OR ':':
          INCREMENT specificity_score[1]
        END IF
      END FOR
    ELSE IF part is '*':
      INCREMENT specificity_score[2]
    ELSE:
      INCREMENT specificity_score[2] // Assume element or pseudo-element
    END IF
  END FOR

  RETURN specificity_score
END FUNCTION