How do I select the href links in the NAV html element, without selecting all href on the page.

Question

Basic question, but need help Lol. I stopped DOM coarse for while, started back yesterday and was in middle of coarse. I feel like i'm good at selecting elements and manipulating them for my experience but don't know the syntax of selecting just the href links in the NAV element. I know I can add ID or a Class to each link in NAV element, but I don't feel like that is what Treehouse is asking and want to do it right to build my skills. I know CSS good, but don't know the CSS pseudo-class selectors by heart. Is this why I can't figure it out? If so ill brush up on these if ill need them more in JavaScript selecting elements.

js/app.js

let navigationLinks = document.querySelectorAll('nav:href');
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>

Answer 1 · 2017-11-06T13:14:50Z

November 6, 2017 1:14pm

Hi there! I feel like this tip will get you there. Remember, that a link is denoted by the anchor tag or <a> tag. The href is an attribute. You don't need to select by the attribute, but rather the element.

For example, to select all h1 elements inside div elements you could do querySelectorAll('div h1'); This would select all h1 elements that reside inside a div element.

Hope this helps!

Answer 2 · 2018-02-20T14:53:15Z

February 20, 2018 2:53pm

Michael Slattery

Nothing has been deleted by Treehouse staff unless the post itself was off topic and violated our TOS (abusive language, racist or sexist remarks, promoting or marketing, etc.).

No one is being deceptive in this thread nor have we been deceptive in our courses. That provides no benefit to us nor to our students. We ask that you treat other mods and students with kindness and respect. For any further conversation on this topic, please email us at help@teamtreehouse.com.

Answer 3 · 2017-11-06T15:09:19Z

November 6, 2017 3:09pm

Thank you Jennifer, passed that part of coarse now, good deal.

Answer 4 · 2018-02-16T22:48:01Z

February 16, 2018 10:48pm

What happened to the Questions on this subject being answered by Idilate? If he thinks that everything we needed to answer this question was given . He will need to show us where the syntax ('nav a') was in the lesson and why it took him three trys at answering the problem before he came up with it. I suggest he take notes and put he students learning the material before feeding his own ego

Answer 5 · 2018-02-16T23:19:34Z

February 16, 2018 11:19pm

I am referring to a very similar line of questioning that was referring selecting list items from under the tag nav. The assumed author did not take kindly to to the very justified criticism that the question was beyond the scope of the instruction given. I was not the only person with this problem as it was a problem for someone years ago and was still a problem today. Still not addressed by Treehouse. Appearently there was enough embarrassment that Treehouse has now removed the community question,answers, and comments much as how they handle things in Russia. I see where you came up with an analogous answer to his which wasn't his first stab at it. This syntax was not mentioned in the lesson.

Answer 6 · 2018-02-16T23:38:32Z

February 16, 2018 11:38pm

Michael is referring to another (similar) question that was asked by another user. This thread

Treehouse haven't deleted anything on that thread, but it's probably less confusing for people that ask questions if we avoid spilling this conversation over into here too.

I think he's annoyed because I felt that the question was clear enough to answer the challenge (as Jennifer said - I'm just a student here like you. I managed to answer it myself after taking the lesson very recently), but I think he's saying that there isn't enough information provided in the lessons to be able to answer the question.

He also appears to be frustrated that I edited my answer to that question a couple of times to try to make it as clear as possible.

Answer 7 · 2018-02-16T23:46:48Z

February 16, 2018 11:46pm

I too am a stutent. You seem to know alot about Treehouse policy and are obviously willing to stand up for them. Are you saying that one member can delete anothers comments? A whole line of questions has gone missing. What is your relationship to this organization? Funny that you should know that I Dilate is a student. Nice work on that syntax. I wish I had see it prior to being tested on it. Deceiving is also a form of abuse. How would you know if I Dilate is on staff?

Answer 8 · 2018-02-17T16:42:16Z

February 17, 2018 4:42pm

Jennifer, By your own discription. to pass yourself off as not on staff at Treehouse is just shy of telling the whole truth. The word deceit is defined in any English language dictionary. I Dilate: you both are far better coders than I. The point is that the lesson is trying to educate someone on my level and didn't give enough info. Certainly HTML is selected thousands of times a day using this syntax. Is it supposed to be a secret? Am I supposed to find these answers only because many others couldn't figure out the text or video either and teach myself through your forum? This and many other issues are not being taken care of even after years. Now if you will kindly show me in the lesson where this syntax is discussed and I failed to take good enough notes as to your specifications, I will apologize. else this would be a great place for your appology. Clearly you have a newer definition of the word staff than mine. Do you make money there? Other than your vast amount of programing knowledge and experience we were given the same to work with.

Answer 9 · 2018-02-17T17:39:31Z

February 17, 2018 5:39pm

Michael,

I agree there is some confusion in this lesson, because clearly several people are asking the same question, so perhaps the guys at Treehouse could add something to the Teachers Notes to give a hint for anyone that is stuck.

I think the key learning here is what goes into querySelectorAll();

querySelectorAll() searches for a CSS selector (this is clearly stated in the lesson it's introduced).

If you check the documentation for querySelectorAll() on MDN (something that was advised in several videos too) you'll also see clearly stated that querySelectorAll() accepts CSS selectors.

If you have taken the HTML+CSS classes, or you have any experience in CSS, then you'll know that you can string multiple selectors together to do different things, for example:

To select all of the <h1> tags that reside inside a <header> using CSS we can write a rule like this:

header h1 {
   font-size: 3em;
}

Or (in the case required for this challenge), imagine how to select all of the <a> links inside the <nav> using CSS:

nav a {
   color: red;
}

So that gave us a CSS selector of "nav a" - which is exactly what you put into querySelector.

querySelectorAll() works in the exactly the same way you normally work with CSS. There is no special JavaScript notation for it - you just put a CSS selector into the brackets. I think perhaps that's the problem, people are expecting a different, javascript specific notation for it - but there isn't one.

W3Schools publish some good examples of the various types of CSS selector running inside querySelectorAll() if you'd like to see some.

I suspect that it must be difficult for the guys at Treehouse to determine how much information is the right amount with which to put in a video... For example, should they also need to teach everyone what a <tag> is within the JavaScript course, because they may not know what HTML is yet? There are some prerequisites to learning JS, and with using querySelectorAll() the prerequisite is a basic understanding of CSS selectors.

I think Treehouse strike a good balance generally, but as I said, perhaps they can do more in this case to clear it up for people that are struggling.

That said - I don't think its hard to find a million examples of how querySelectorAll() works using Google, so part of the responsibility for learning must also lie with the student.

Lastly - I wasn't trying to be condescending when I wrote my comment about taking notes, although you seem quite offended by it (I apologise for causing any offence). The original poster in the thread yesterday was trying to use querySelector() rather than querySelectorAll() in the first instance - which is something that was covered quite clearly in the video, but is easily forgotten. I was merely saying that when I took this lesson (and any lesson in fact), I feel that writing as many notes as possible really helps me to remember the sometimes confusing, and easily forgotten syntax.

Answer 10 · 2018-02-18T08:07:33Z

February 18, 2018 8:07am

Seems you only accept posts that don't point out your company's shortcomings.such as disagreeing with your employees who were clearly wrong and making condescending remarks. read the entire transcript. At no time did I say anything that was untrue or unfair or abusive. In fact your group owes me an apology and admission of deceptive practices and an admission of being wrong about a topic they had 3 days to support. Read your own peoples comments. The topic in question was not covered in the lesson.

Welcome to the Treehouse Community

Looking to learn something new?

Cody Smith

Cody Smith

How do I select the href links in the NAV html element, without selecting all href on the page.

10 Answers

Jennifer Nordell

Jennifer Nordell

Rob Allessi

Rob Allessi

Cody Smith

Cody Smith

Michael Slattery

Michael Slattery

Jennifer Nordell

Jennifer Nordell

Michael Slattery

Michael Slattery

Jennifer Nordell

Jennifer Nordell

I Dilate

I Dilate

Michael Slattery

Michael Slattery

Jennifer Nordell

Jennifer Nordell

I Dilate

I Dilate

Jennifer Nordell

Jennifer Nordell

Michael Slattery

Michael Slattery

Jennifer Nordell

Jennifer Nordell

Michael Hulet

Michael Hulet

I Dilate

I Dilate

Jennifer Nordell

Jennifer Nordell

I Dilate

I Dilate

I Dilate

I Dilate

I Dilate

I Dilate

Jennifer Nordell

Jennifer Nordell

Michael Slattery

Michael Slattery

Michael Hulet

Michael Hulet