Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Kirk Rohani
seal-mask
.a{fill-rule:evenodd;}techdegree
Kirk Rohani
Full Stack JavaScript Techdegree Student 2,312 Points

What if we use both ID selector and Class selector, which takes precedence?

If an HTML tag has both selectors and the CSS file defines let's say background-color (pick any property) for both selectors, which takes precedent, the id or class?

2 Answers

andren
andren
28,558 Points

The ID selector takes precedence, due to a concept in CSS called Specificity. Specificity is a bit complicated but essentially all CSS rules has a score calculated based on what (and how many) selectors are present in them. The selector with the highest score wins out. ID selectors are prioritized over class selectors, and class selectors are prioritized over element selectors.

A useful resource for understanding Specificity is this Specificity calculator, it allows you to put in two or more CSS rules and shows you in a pretty visual way which gets the higher score and why.

Kirk Rohani
seal-mask
.a{fill-rule:evenodd;}techdegree
Kirk Rohani
Full Stack JavaScript Techdegree Student 2,312 Points

Thanks Andren! So like 2 minutes later in the CSS Basics video Guil ends up answering my question.

I gotta learn to be more patient!