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 One Solution

Andrew LeQuang
Andrew LeQuang
4,970 Points
Posted by Andrew LeQuang
Andrew LeQuang
4,970 Points

I notice that the video use querySelector to select tag elements, but when I use it I need to use CSS.

For example.

let text = document.querySelector(".container h1");

I have to use the CSS selector .container, to get to the h1 tag. I cannot just select the h1 tag.

does anyone else see this issue?

2 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

You can use simply "h1" as the selector, but remember that if there are more than one of those elements on the page, only the first one (on the entire page) will be selected.

Chris Shaffer
Chris Shaffer
12,030 Points
Chris Shaffer
Chris Shaffer
12,030 Points

I know this is late to the game on this question, but in case anyone reads this later:

In my professional experience, the more specificity you can use, the more likely you will not have adverse side-effects. However, this can make your code more brittle. When new elements are added, for example, if you're targeting an ID (which is very specific) obviously the new elements won't get included.

I feel best practice is to target class when you can if you are selecting multiple elements and to use the tag name with that selection like h1.myClassName as this will also be more verbose for someone else reading your code; it's clear you're targeting a group of h1 tags with the class myClassName, and that there may be other elements with that class name.