* {universal selector}
0 point
div, ::selection {element or pseudo-element}
1 point
.myClass, :root {class or pseudo-class}
10 points
#ID {id selector}
100 points
<.. style="text-indent: 12px;"> {inline Style Attr}
1000 points
.. property: value; !important; {!important keyword}
10000 points
*{box-sizing: ...;}
Universal Selector
0 0 0
div p{...}
Two elements
0 0 2
h3::selection{...}
Element, Pseudo-Element
0 0 2
.myClass{max-inline-size: ...;}
Class
0 1 0
p.center{text-align: center;}
Elemnet, Class
0 1 1
p a:hover{text-decoration: none;}
Element(2) PseudoClass
0 1 2
section#banner h2{...}
ID, Element(2)
1 0 2
section#container .grid-item ul li a
ID, Element(4), Class
1 1 4
<p style = "text-indent: 12px;"></p>
Inline Style
1000 points
nav a:not(:first-child)
Element(2), PseudoClass*
0 1 2
.. {color: red !important;}
!important
10000 points
* => :not PseudoClass does not contribute 10 points but inside braces it does like :not(:last-type-of)
Read More
