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 Getting a Handle on the DOM Return Elements Using CSS Selectors

Posted by Diego Guzman
Diego Guzman
2,205 Points

When do you use . and when do you use #?

for part 2 how come the answer is ('#gallery a' ) and not (' .gallery a' )

app.js 
let navigationLinks = document.querySelectorAll('nav a');
let galleryLinks = document.querySelectorAll('#gallery a');
let footerImages;
index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Treehouse Student | 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>Treehouse Student</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="#" class="selected">Work</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="#">
              <img src="img/numbers-01.jpg" alt="The number 1 painted with colors and textures.">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="img/numbers-02.jpg" alt="The number 2 painted with various colors blended together.">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="https://twitter.com/treehouse"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="https://www.facebook.com/TeamTreehouse"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; Treehouse Student.</p>
      </footer>
    </div>
    <script src="app.js"></script>
  </body>
</html>
Nathan Piper
Nathan Piper
5,711 Points

. is for selecting elements based on class name and # is for selecting elements based on id

1 Answer

Bob Swaney
Bob Swaney
13,010 Points
Bob Swaney
Bob Swaney
13,010 Points

Its really all about specificity when it comes to whether to use . or #; its really up to the person coding. If you are going to have multiple items, sections, etc...its better to label it a 'class' and use '.'; if it is a one-off item, picture, section, etc. then use # as it has a higher specificity than . class does;

when using document.querySelectorAll('#gallery a'), it's going to grab any 'a' tags that are direct children of the <ul id="gallery"> section and put them into an 'HTMLCollection' "array" that is accessible like an array is. If the gallery section was like this:

<ul class="gallery"> then you would have used '.' instead. so really it's just up to the programmer and how they want to specify the content on their pages/apps

Hope this helps!