Browserdev challenge 7: Specificity!

Adrian Cochrane

Count:

  • The number of ID tests
  • class, attribute, pseudoclass tests
  • tagname & pseudoelement tests

in a selector & output these 3 numbers in that order.

For the contrived selector "html body.nojs.promo > div#pagewrap#menu.masonry ul#summer-drinks#refreshments li.favorite.emphasize" output "4 5 5".

Tweak last week's program to stable-sort by these counts, treating class/etc count as a tiebreaker for ID count. And tagname/etc count as a tiebreaker for class/etc count.

Bonus challenge: Implement "@layer" at-rules to impact this ordering.