Specificity

Question 1

What determines which CSS rule is applied when there are competing declarations?

Answer 1

CSS uses specificity to decide between competing declarations.

Question 2

What are the three components of the specificity triad?

Answer 2

The three components are A (id-like specificity), B (class-like specificity), and C (element-like specificity).

Question 3

In CSS specificity, what does a higher value in component A signify?

Answer 3

A higher value in component A (id-like specificity) means the rule is more specific.

Question 4

How are two specificity values compared when their first component is equal?

Answer 4

If the first components are equal, compare the next higher specificity value.

Question 5

Which specificity is more specific: (1, 0, 0) or (0, 4, 3)?

Answer 5

(1, 0, 0) is more specific than (0, 4, 3).

Question 6

How does specificity work in complex and compound selectors?

Answer 6

Each part of a complex or compound selector adds to the specificity.

Question 7

What is the specificity of the selector a.my-class.another-class[href]?

Answer 7

The specificity is (0, 3, 1).

Question 8

What role does element-like specificity (C) play in determining CSS specificity?

Answer 8

Element-like specificity (C) is the third component and is used when the first two components are equal.

Question 9

How would a selector with an ID (e.g., #id) compare to a selector with only classes and elements (e.g., .class a) in specificity?

Answer 9

A selector with an ID (#id) is more specific than a selector with only classes and elements.

Question 10

What happens when two specificity values are tied in the first and second components?

Answer 10

When the first and second components are tied, the comparison moves to the third component (element-like specificity).