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 AngularJS Basics (1.x) Using Angular's Built In Directives Using ng-blur and ng-class to Improve User Experience

Roshini Thiagarajan
Roshini Thiagarajan
8,941 Points
Posted by Roshini Thiagarajan
Roshini Thiagarajan
8,941 Points

Explain the CSS please: .list .item.editing-item .actions

How does this line of CSS ensure only the 'actions' div of the 'item' div is accessed? Adding a space between '.item .editing-item' does not yield the same behavior as ''.item.editing-item'', which does NOT have a space in between

.list .item.editing-item .actions { margin-top: 17px; }

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Roshini,

When 2 classes are together like that then it means the element has to have both of those classes for it to match. When there's a space between like the other parts of that selector then it creates a descendant selector.

In the html file, the item div only has a class of "item".

It looks like this minus the ng directives

<div class="item">

Huston mentions in the video that the "editing-item" class will be conditionally applied to those item divs.

So for the one that is getting edited, it will have the "editing-item" class dynamically applied to it.

It will then look like this

<div class="item editing-item">

That selector you posted will target any "actions" element that is within an element that has both the "item" class and the "editing-item" class which in turn is within a "list" element.

If you inspect the html with your browser's dev tools then you should be able to see this class being dynamically added and removed depending on your user actions.