Misconception: Novice students struggle with understanding and correctly using CSS selectors in advanced and complex ways, particularly with selector specificity.

  • Advanced and compound CSS selectors pose difficult to resolve errors for students learning web development.
    • In particular, novices don’t know that certain selectors take precedence over others, let alone that there is CSS selector specificity (essentially a weighting system that determines which CSS rule is applied by the browser).
      • For example, .div has a greater specificity than #element
  • This type of error is called a knowledge-based error. It occurs as a result of significant gaps in knowledge. Resolving these types of errors successful involves substantial learning.
  • Note from CSTeachingTips Team: to learn more about CSS Selector Specificity, check out Smashing Magazine’s article CSS Specificity: Things you Should Know.

More about this tip

External Source

"Towards a Taxonomy of Errors in HTML and CSS" by Thomas Park, Ankur Saxena, Swathi Jagannath, Susan Wiedenbeck, and Andrea Forte.