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

Posted by Eric Garcia
Eric Garcia
6,217 Points

Multiple ways to select the paragraph in the "description" class?

In the video, he selects the paragraph in the "description" class by entering:

const p = document.querySelector('p.description');

I thought we had to put the class first, then the paragraph element like this:

const p = document.querySelector('.description p');

Can someone explain the difference?

1 Answer

Chris Balazic
Chris Balazic
15,907 Points

Those 2 lines of code are selecting different things. They work like CSS selectors, so,

const p = document.querySelector('p.description');

is saying "Select a p element that has a class of "description"". So you're first looking for paragraphs specifically with that class. However, in the second line of code,

const p = document.querySelector('.description p');

it's saying "Select a "p" element that is a descendant of an element that has the class of "description"". You're first looking at elements with that class name and then narrowing it down to paragraphs within those elements.

The order of the elements and classes in the selector will make a difference.

Calin Bogdan
Calin Bogdan
14,921 Points

Hi! You gave a pretty comprehensive explanation so I changed your comment into an answer.

Eric Garcia
Eric Garcia
6,217 Points

Thanks man, kind of a dull moment for me, haha.