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.

Following are the six selector groups listed from highest to lowest priority:

1. 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;}.

2. 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.

3. 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;}.

4. 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;}.

5. 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;}.

6. 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 only applies when competing rules are in the same selector group and have the same number and level of selectors. Selector groups always take precedence over location groups.) The six locations are listed here from highest to lowest priority:

1. 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>.

2. 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.

3. The third-highest-priority location is a stylesheet attached by a <link> element. For example, a rule in a stylesheet attached by a <link> element overrides a competing rule imported by an @import statement embedded within the stylesheet.

4. 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.

5. The fifth-highest-priority location is a stylesheet attached by an end user. • An exception is made 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.

6. The lowest-priority location is the default stylesheet supplied by a browser.

When multiple stylesheets are attached or imported at the same location level, the order in which they are attached determines the priority. Stylesheets attached later override stylesheets attached previously.

When competing rules are in the same selector group, have the same number and level of selectors, and have the same location level, rules listed later in the code override rules listed earlier.

In Example 1-7, each rule in the stylesheet is applied to the division element. Each rule applies a different border-width to <div>. Cascading order determines which rule actually gets applied. I sorted the styles in the stylesheet into cascading order from least to most important. As you can see from the screenshot, the browser applies the last rule to the <div>, which sets a 14-pixel border around the <div>. The browser applies this rule because it has the highest priority in the cascading order—it is an ID selector with !important attached to it.

Notice how ID selectors override class selectors, which in turn override element selectors, which in turn override the universal selector. Notice how !important gives selectors a whole new magnitude of importance. For example, the !important universal selector is more important than the un-!important ID selector!

Notice how border-style:none!important; is placed in the body and html selectors to prevent the universal selector * from putting a border around <body> and <html>. This also illustrates how element selectors override universal selectors.

Related posts:

1. CSS Syntax & Syntax Details CSS syntax is easy. A stylesheet contains styles; a style...
2. Using Shorthand Properties in CSS Your body rule should now look like this: body {...
3. Types of CSS selectors In the previous example, the most basic style of selector...
4. Using Stylesheets You can place styles in three locations: stylesheets, <style>, and...
5. Adding styles to a web page The most common (and useful) method of applying CSS rules...

Related posts brought to you by Yet Another Related Posts Plugin.