CSS CSS Basics (2014) Basic Selectors Reusing Classes

Jason Ruby
Jason Ruby
2,867 Points

ID selector vs. Class selector: Order of Precedence

I am just looking to confirm that I completely understand the application of defined styles as they are applied to ID and Class selectors in the case when an element in an HTML file is identified by both an ID and a Class.

Assuming there are no other styles that are affecting the element in the HTML file the styles applied via the ID will override any style applied through reference of the Class specific to that element.

Is that correct?

3 Answers

Steven Parker
Steven Parker
205,354 Points

Yes, assuming that only the ID or class are being used as the sole selectors and not combined with anything.

:point_right: The general rules for CSS specificity are:

  • inline is more specific than id
  • id is more specific than class
  • class is more specific than element
Kevin Korte
Kevin Korte
28,102 Points

The bottom of this article does a great job visually showing you how specificity is calculated.

https://css-tricks.com/specifics-on-css-specificity/

Jason Ruby
Jason Ruby
2,867 Points

Very cool article and really handy. Thank you, Kevin! This might be a good resource to include in Teacher Notes for one of the applicable courses or corresponding lessons. It may be a bit too advanced for the lesson from which my questions was initiated. None the less, it is still some solid information and a great reference. Thank you again!

Jason Ruby
Jason Ruby
2,867 Points

Thank you, Steven!