CSS Selector Battle

ROUND ONE : The h2 would be ...

• purple

• green

Answer explanation

main h2 is a more specific selector than h2

ROUND TWO: The h2 would be

• purple

• green

Answer explanation

main h2 is a more specific selector.

ROUND THREE: The odd items of both ol and ul lists would be ..

• orange

• red

Answer explanation

same level of specificity, position

ROUND FOUR: The p in the footer would have a _______ border

• blue

• red

Answer explanation

same level of specificity, position

ROUND FIVE: The background of the div would be

• oraange

• purple

Answer explanation

class selectors are more specific than combinators (specificity)

ROUND SIX - If there were two h2 element selectors in each of these stylesheets, which stylesheets h2 styles would be applied?

• the first stylesheet

• the second stylesheet

Answer explanation

if both selectors are the same specificity, the style rules in the second stylesheet listed would be applied (position)

BONUS ROUND: The border colour around the h2 with an ID of mainHeading will be

• pink

• orange

Answer explanation

!important overrides all previous styling rules and adds more importance to a property value than normal. Use sparingly and with caution!