Conflict Resolution - jpjohnsonjr/learning-notes GitHub Wiki

Concepts in Cascading Algorithm

Provides precise control over targeting content while allowing maximum re-use of styles across website. Key concepts:

  • Origin (or Origin Precedence)
  • Merge
  • Inheritance
  • Specificity

Origin

When in conflict, the last declaration wins.

Merge

For external CSS, declared at the spot where it's linked to. When not in conflict, declarations merge.

Inheritance

DOM Tree - Document Object Model.

Body - x
  element - xy
    element - xy
    element - xy
  element - x
  element - x

If a property is specified on an element, every child element will inherit that property. In the example tree above, every child of body carries property x, but only children of the first element in the tree also carry property y.

Specificity

The most specific selector combination wins. Can by thought of as a "score", arranging four types of properties out, left to right:

Code Example Style="..." ID Class, pseudo-class, attribute No. of elements Comments
h2 style="color: green;" 1 0 0 0 Gets highest-possible score because specifying the CSS style directly on the element generally overrides everything else.
div p { color: green; } 0 0 0 2 Specifies style for two elements; therefore, number of elements box gets value of '2'.
div #myParag { color: blue; } 0 1 0 1 Not using style attribute, but uses an ID attribute. Uses no class. Impacts one element. Score = 101. Could have "won" over the next row by not specifying div element at all.
div.big p { color: green; } 0 0 1 2 No style attribute or ID attribute. Uses 1 class and 2 elements. Final score: 12. If in conflict with the previous row, the previous row would win and the paragraph would be blue and not green.

Precedence rules can be overridden with the switch !important; but this should be used with extreme caution as it will create a "maintenance nightmare on a real-world project.

⚠️ **GitHub.com Fallback** ⚠️