You are here:Home»KB»Web Design»CSS»CSS Processing Priority and Direction Rules
Sunday, 30 November 2014 00:00

CSS Processing Priority and Direction Rules

Written by
  • I always believed that css when parsed was processed from the top down with no exceptions. Although it does read from top to bottom and process in that direction there is a prior level to that.
  • It appears that the css is parsed in element levels first. it scans each element level and then goes down the page for each level ie. each deeper level has the ability to overide its parent. see examples below:

Example 1

#contact #center_column p {margin:0; padding:0 0 10px 0;}
#contact fieldset p {padding-left: 60px;} /* correct drop down placement */

Even thought the padding-left is after, the first line take presidence because it is further down the element chain. so line 1 will apply.

Example 2

#contact #center_column p {margin:0; padding:0 0 10px 0;}
#contact #center_column fieldset p {padding-left: 60px;} /* correct drop down placement */

In this example line 2 will be applied because the are at the same element level, but then line 2 is after line 1 so is applied as you normally expect css to work.

Read 797 times Last modified on Sunday, 12 July 2015 10:28