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 JavaScript and the DOM (Retiring) Getting a Handle on the DOM Practice Selecting Elements

Did i miss something in this section?

So with the challenges at the end of this section i keep getting the selection practice incorrect. With things like:

In this challenge, you're going to select various elements from index.html. First, select all links inside the <nav> element and assign them to the variable navigationLinks. (HINT: Use a descendant selector to match elements that are descendants of an element.)

Ive went over this section again to make sure i didnt miss anything, however for example on this question im not seeing an explanation on why it should be "docuement.querySelectorAll('nav a'). as opposed to just ('nav') as i was originally thinking.

or for example with query selector how he uses "." and "#" before different selectors.

I feel like i must be missing a key video or section on this topic because on little details like that I'm totally lost and dont remember ever hearing about.

Can someone help me with what im missing ?

js/app.js
let navigationLinks = document.querySelectorAll("nav a");
let galleryLinks;
let footerImages;
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2016 Nick Pettit.</p>
      </footer>
    </div>
  <script src="js/app.js"></script>
  </body>
</html>

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Travis Sly! A good portion of this is going to depend on how much experience you have with CSS selectors if you want to use a CSS selector to do this. It's also going to depend a lot on how familiar you are with HTML. There was actually another solution to the first line. You could have also done:

let navigationLinks = document.getElementsByTagName("nav")[0].getElementsByTagName("a");

This would start by picking the first <nav> element and then from within that getting all the <a> tags. You might be inclined to think <li> is a link, but it's a list item. It's the "anchor tag" or <a> for short, which is what we're trying to select.

A CSS selector is how we choose something for styling in CSS. I notice on your profile that you haven't yet accrued any CSS or HTML points, and I think this might be causing this to be more difficult than it needs to be. In CSS if I wanted to select all <nav> elements, I would make a rule like:

nav {
   background-color: tomato;
}

I'm betting that you can guess just by the code above what that rule does. It turns the nav a really obnoxious shade of red orange :smiley: The # indicates an id.

So if I had:

<div id="silly-div">

</div>

The CSS selector to turn it tomato would be:

#silly-div {
  background-color: tomato;
}

The CSS selector for a class uses a . in front. So if inside that div I had something like:

<div id="silly-div">
    <h2 class="light-heading">My heading</h2>
</div>

I could pick it with CSS by the class:

.light-heading {
    color: white;
}

This would change any element that has that class so that the text color is white.

But let's say I have some paragraphs in that div too and I want their color to be beige. But I don't want every paragraph on the page to be beige because most of the page is a very light color. But this particular div is a really wild orange so beige might look good here. I could pick all the paragraphs inside that div like so:

<div id="silly-div">
    <h2 class="light-heading">My heading</h2>
    <p>First paragraph</p>
    <p>Second paragraph</p>
</div>
#silly-div p {
  color: beige;
}

This would turn every paragraph inside the "#silly-div" beige, but no others. We're confining beige to that one div. The CSS selector here is "#silly-div p".

So with that in mind does "nav a" make more sense knowing that it is a CSS selector? :smiley:

Hope this helps! :sparkles:

edited for additional information

If you want to learn more about them, we have a course on CSS selectors right here on Treehouse! :sparkles:

Holy cow that was so much good info!! Thank you so much :D

I'll have to look more into CSS and HTML, I'm glad that i wasnt missing anything from this section I was sure i had for a moment.

JOE BELL
JOE BELL
11,113 Points

Jennifer Nordell.

looking from Travis Sly's request for help i can tell this information that followed your first answer was no help. i was stuck on the same challenge and type the same thing.

let navigationLinks = document.getElementsByTagName('nav a')

It would be more beneficial to have had the explanation of your first answer included in a video.

Michael Hulet
Michael Hulet
47,913 Points

Hey JOE BELL, when you're reading/replying to people here, you're talking to other students, so course feedback like requests for information in videos can't/won't be followed-up here. Even though Jen is a teacher (unlike most people here, including me), she didn't make this course, so she can't edit it. If you have feedback about the content, your best bet is to email support at help@teamtreehouse.com

If you're still having trouble with this code challenge, you should ask a question of your own, so that others can help debug your code, because you might not be having the same problem