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 Layout Box Model Concepts Box-sizing

id selector?

What are the cases for using '#' as opposed to '.' for id selecting? ie '.bio' vs '#bio' in the CSS?

1 Answer

Nils Kriedner
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nils Kriedner
Full Stack JavaScript Techdegree Graduate 30,933 Points

Hi Waylon,

they actually have different names... ;-)

  #selector

is called ID-selector.

  .selector

is called CLASS-selector.

The id selector defines an id that is unique on that page. That means - means you can use it to link to the exact spot of the element from somewhere else. You cannot do that with a class.

Because a class selector can be used for multiple elements. So you cannot use a class-selector to link to its spot, because there is not one spot but possibly multiple spots.

Class selectors are ideal if you want to use one kind of style for many elements. So you could create a class called "border-top" for example that always adds a border to the top of an element. Or if you have many cards on a page you could give each of those elements the class "card" and style them all with this selector name.

Another important difference is that because an ID selector is more specific than a CLASS selector it means it has a higher value if there are conflicting styles. The id selectors styles will win if there are conflicting styles between two css declarations.

Generally I would reccomend to only use IDs for elements that you actually need to link to. Because they create an anchor for the element and that is not really needed in most cases when you want to style an element.

Hope that helped clarify a bit. Best wishes for your coding journey, Nils

Incredibly helpful! thank you, Nils.