Example: Specificity

Recall that specificity is given as a triple (i, c, e), where:

  • i is the number of selectors for an individual IDAn attribute specifying a unique identifier for an element. or attributeExtra information added to an element.
  • c is the number of selectors for a class or pseudo-classA way to specify in a selector how to style an element based on the state it is in, such as a visited link.
  • e is the number of selectors for an element or pseudo-elementA way to specify in a selector how to style specific information in a chosen element, such as the first line or letter of text.

Before clicking the Load page button, figure out which rules apply to each block of text and each link, determine the specificities of the rules, and then figure out the colour for each element.

(Ignore the warning messages - this is meant as an exercise, not a model of how best to write rules.)

Note:

Hints:

  • No rules apply to the first block of text.

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
p.odd.last {
  colorred
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX