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 CSS Basics (2014) Basic Selectors Basic Selectors Review

John Bosquet
John Bosquet
1,609 Points

I believe type selectors have the most specifity and carr the most weight??

I believe type selectors have the most specifity and carr the most weight??

1 Answer

Igor Kushnir
Igor Kushnir
2,054 Points

I’m not sure I understood your question. If you’re asking about Selector type importance and what comes before what then this might help you.

In short(most to least weight) 1.ID Selector [CSS: #example {}]

  1. Class Selector [CSS: .example {}]
  2. Type Selector [CSS: h1 {}]

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity Go to “Selector Type” Section.

Also if you have a difficulty to remember then these methods.

Method 1:

You can just go with I have ONE ID>I took a few Classes in my life>The rest are weaklings.

Method 2:

Now, the trick I’m about to tell you might work only for me but if you can understand it, it might make it easier for you to understand how it works, so give it a try:

I’d like to think about it as cases of “rarity\specificity”+”effort”. The less elements you get to select by declaring the selector and the less you get to work(edit) on the html file the more weight it has (Ofcourse all that while I’m comparing between type selectors).( so if I understood you correctly: The more specified the selector is the more weight it has,yes)

For Example:

  1. You can only assign ONE ID to any given element so when you tweak it you only Change ONE element - that’s why its the strongest.
  2. You can assign multiple elements with the same class, thus changing them all by tweaking the same “class”.
  3. You can change all elements like p,h1-6 without even editing the html file, thus making it the weakest selector.

Hope It helped you.