Here's a generic p
element. It will be red.
Here's a p
element with a class
of example
. There are two rules that could apply, but since the .example
selector is more specific, this paragraph will be blue.
Here’s a p
element with two classes: example
and example-2
. There are four rules that could apply to this paragraph. The first two are overruled by the more specific last two. However, because the last two have the same selector, the order breaks the tie between them: the one that appears later wins, and thus this paragraph will be green instead of magenta.