CHAPTER 1 DESIGN PATTERNS: MAKING CSS EASY!
Using Cascade Order
CSS allows you to assign the same rule to the same element multiple times. I call these competing rules.
Browsers use the cascading order to determine which rule in a set of competing rules gets applied. For
example, a browser assigns default rules to each element. When you assign a rule to an element, your
rule competes with the default rule, but since it has a higher cascading priority, it overrides the default
rule.
The cascading order divides rules into six groups based on the type of selector used in the rule. A
rule in a higher-priority group overrides a competing rule in a lower-priority group. Groups are
organized by the specificity of their selectors. Selectors in lower-priority groups have less specificity than
selectors in higher-priority groups.
The guiding principle behind the cascade order is that general selectors set overall styles for a
document and more specific selectors override the general selectors to apply specific styles.
For example, you may want to style all elements in a document with no bottom margin using
*{margin-bottom:0;}. You may also want to style all paragraphs in a document with a bottom margin of
10 pixels using p{margin-bottom:10px;}. You may also want to style the few paragraphs belonging to the
double-space class with a bottom margin of 2 ems using *.double-space{margin-bottom:2em;}. You may
also want to style one paragraph with an extra-large bottom margin of 40 pixels using
#paragraph3{margin-bottom:40px;}. In each of these cases, the cascade order ensures a more specific
selector overrides a more general one.
Here are the six selector groups listed from highest to lowest priority:- The highest-priority group contains rules with !important added to them. They
override all non-!important rules. For example, #i100{border:6px solid- black!important;} takes priority over #i100{border:6px solid black;}.
- The second-highest-priority group contains rules embedded in the style
attribute. Since using the style attribute creates hard-to-maintain code, I do
not recommend using it. - The third-highest-priority group contains rules that have one or more ID
selectors. For example, #i100{border:6px solid black;} takes priority over
*.c10{border:4px solid black;}. - The fourth-highest-priority group contains rules that have one or more class,
attribute, or pseudo selectors. For example, *.c10{border:4px solid black;}
takes priority over div{border:2px solid black;}. - The fifth-highest-priority group contains rules that have one or more element
selectors. For example, div{border:2px solid black;} takes priority over
*{border:0px solid black;}. - The lowest-priority group contains rules that have only a universal selector—
for example, *{border:0px solid black;}.
When competing rules belong to the same selector group (such as both rules contain ID selectors),
the type and number of selectors prioritize them further. A selector has higher priority when it has more
selectors of a higher priority than a competing selector. For example, #i100 *.c20 *.c10{} has a higher
priority than #i100 *.c10 div p span em{}. Since both selectors contain an ID selector, they are both in
the third-highest-priority group. Since the first has two class selectors and the second has only one class
selector, the first has higher priority—even though the second has more selectors.
When competing rules are in the same selector group and have the same number and level of
selectors, they are further prioritized by location. Any rule in a higher-priority location overrides a
competing rule in a lower-priority location. (Again, this applies only when competing rules are in the