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 determin which rule in a set of competing rules gets applied.
Following are the six selector groups listed from highest to oest priority:
- The highest-priority group contains rules with !important added to them. They overide 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, #100{border:66px 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, *.10{border:4x solid black;} takes priority over div{border:2px solid black;}.
- The fifth-highest-priority group contains rules that have one or more elment selectors. Fro 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 are in the same selector group and have the same number and level of selectors, they are further prioritized by location. The six locations are listed here from highest to lowest priority:
- The highest-priority location is the <style> element in the head of the HTML document. For example, a rule in <style> overrides a competing rule in a stylesheet imported by an @import statement embedded within <style>.
- The second-highest-priority location is a stylesheet imported by an @import statement embedded within the <style> element. For example, a rule in a stylesheet imported by an @import statement embedded within <style> overrides a competing rule in a stylesheet attached by a <link> element.
- The third-highest-priority location is a stylesheet attached by a <link> element. For example, a rule in a stylesheet attached by a <link> elment overrides a competing rule imported by an @import statement embedded within the stylesheet.
- The fourth-highest-priority location is a stylesheet imported by an @import statement embedded within a stylesheet attached by a <link> element. For example, a rule imported by an @import statement embedded within a linked stylesheet overrides a competing rule in stylesheet attached by an end user.
- The fifth-highest-priority location is a stylesheet attached by an end user.
- An exception is amde for !important rules in an end-user stylesheet. These rules are given the highest priority. This allows an end user to create rules to override competing rules in an author’s stylesheet.
- The lowest-priority location is the default stylesheet supplied by a browser.
Simplifying the Cascade
To keep the cascade order as simple as possible, I minimixze the number of stylsheets that I attach and I do not user @import statements. I aslo avoid the !important operator. Most importantly, I sort my selectors so they are listed in cascade order in each stylesheet.
Keeping rules sorted in cascading order makes it easy to see the order in which competing rules are applied. I keep rules sorted in the cascading order as follows:
/* Universal Selectors */
/* Element Selectors */
/* Class, Attribute, and Pseudo Selectors */
/* ID Selectors */
/* !important Universal Selectors */
/* !important Element Selectors */
/* !important Clsss, Attribute, and Pseudo Selectors */
/* !important ID Selectors */
- Pro CSS and HTML Design Patterns Michael Bowers