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 jQuery Basics (2014) Creating a Simple Drawing Application Perform: Part 1

Yijiao Wang
Yijiao Wang
1,793 Points
Posted by Yijiao Wang
Yijiao Wang
1,793 Points

color decoration question

var color = $(".selected").css("background-color");

I am a little confused about this line in the video. In the html file, 

<li class="red selected"></li>

How to understand "red selected" in this line of code. Does it mean that there are two classes here. red, selected? And, when calling the css function, we use "background-color". In the style. css file, the "red"class has "background: #fc4c4f". I'm wondering why we didn't use "background" to get the color of red/blue/yellow class but use "background-color" instead?

1 Answer

Arturo Alviar
Arturo Alviar
15,739 Points
Arturo Alviar
Arturo Alviar
15,739 Points

Like you said, "red selected" means that element has two classes: red and selected. A space in the class string indicates the start of a different class name.

Background color is used to get the actual color value. Background is short hand for lots of properties. For example you can have: 

.element{
background: #212121;
}

Let's see what we get when we use background vs. background-color in jQuery

var bg = $('.element').css('background');  //returns rgb(33,33,33) none repeat scroll 0% 0% / auto padding-box border-box
var color = $('.element').css('background-color'); //returns rgb(33,33,33) which is #212121

As you can see, background-color is more specific and gives us just the color.

Hope this helps!