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 Introduction to jQuery DOM Manipulation Changing Styles

Posted by nathanielcusano
nathanielcusano
9,808 Points

The selected class is a class in normalize.css? 

$('.card').on('click', function() {
  $(this).toggleClass('selected');
});

2 Answers

nathanielcusano
nathanielcusano
9,808 Points

I figured it out myself. If you open the console using ctrl+shift + I, and click the elements tab to see your html you can see this take place in real time. What happens is the jQuery adds a "selected" class to the div element when you click on the picture. If you click the picture again, the "selected" class will dissapear from the DOM in real time. Therefore the jQuery CREATES the class here. It is not taken from the CSS. This was not apparent to me since this was never plainly stated in the video that the method called .toggleClass has the ability to literally create a class since I did not understand this happening without the .append method.

Gabbie Metheny
Gabbie Metheny
33,778 Points
Gabbie Metheny
Gabbie Metheny
33,778 Points

The styling for .selected already does exist in the stylesheet. Otherwise, the browser wouldn't know how to change the appearance when the class toggles to 'selected'. The CSS file is almost impossible to read, at least in my version, as everything is on a single line, but if you use ctrl + f to perform a 'find' search, you can see that the styling for .card.selected changes the background color and the border.