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

JavaScript Treehouse Club: JavaScript Car Sounds CSS Selectors

What is a Class Selector? How is it different from an element selector?

I'm not understanding what each is. I googled it but it's still making no sense.

2 Answers

Technically, they all do the same: select an element. The element selector targets all the elements using the tag, example <p>, if you style that element, all the paragraphs will take the styles. But a class is a selector you create, example <p class="mine"> then when you select that .mine class and style it, only the elements where you placed the class will take the style, the p tags will not be modified, the same applies to id's. Later in the course, you will learn about what style is used if an element has multiple CSS pointing to it.

Steven Parker
Steven Parker
229,732 Points

A class selector is made from the class name prefixed with a period. It applies to every element (of any type) that has that class.

An element selector is just the element tag name with no punctuation. It applies to every element of that type.

And while were discussing selectors, an ID selector would be an ID name prefixed with a hash mark. It applies to the element with that ID (there can only be one on the page). Examples:

div { }    /* element selector, applies to all <div> elements */
.star { }  /* class selector, applies to all elements with class="star" */
#top { }   /* ID selector, applies only to the element with id="top" */