Which selector has higher specificity?

Which selector has higher specificity?

• A. .nav
• B. ul.nav > li.active a:hover
• C. ul li a
• D. .nav .active

Answer: (B)

Specificity determines which CSS rule wins when multiple selectors target the same element. It’s calculated by four parts: inline styles, then the number of IDs, then the number of classes/attributes/pseudo-classes, and finally the number of element/pseudo-element selectors. The rule with the higher value in this scale takes precedence. The first selector uses one class, so its specificity is 0-0-1-0. The second selector mixes an element chain with multiple classes and a pseudo-class: two classes (.nav and .active) plus a pseudo-class (:hover) give three in the class-category, and there are three elements (ul, li, a), giving a specificity of 0-0-3-3. The third selector uses only elements: ul, li, a, for a specificity of 0-0-0-3. The fourth selector uses two classes (.nav and .active), for a specificity of 0-0-2-0. Since 0-0-3-3 is greater than 0-0-2-0, 0-0-1-0, or 0-0-0-3, the second selector has the highest specificity and would win when all match the same element.

Specificity determines which CSS rule wins when multiple selectors target the same element. It’s calculated by four parts: inline styles, then the number of IDs, then the number of classes/attributes/pseudo-classes, and finally the number of element/pseudo-element selectors. The rule with the higher value in this scale takes precedence.

The first selector uses one class, so its specificity is 0-0-1-0.

The second selector mixes an element chain with multiple classes and a pseudo-class: two classes (.nav and .active) plus a pseudo-class (:hover) give three in the class-category, and there are three elements (ul, li, a), giving a specificity of 0-0-3-3.

The third selector uses only elements: ul, li, a, for a specificity of 0-0-0-3.

The fourth selector uses two classes (.nav and .active), for a specificity of 0-0-2-0.

Since 0-0-3-3 is greater than 0-0-2-0, 0-0-1-0, or 0-0-0-3, the second selector has the highest specificity and would win when all match the same element.