FAQ: Selectors - ID

This community-built FAQ covers the “ID” exercise from the lesson “Selectors”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Full-Stack Engineer
Front-End Engineer
Back-End Engineer

FAQs on the exercise ID

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!
You can also find further discussion and get answers to your questions over in #get-help.

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head to #get-help and #community:tips-and-resources. If you are wanting feedback or inspiration for a project, check out #project.

Looking for motivation to keep learning? Join our wider discussions in #community

Learn more about how to use this guide.

Found a bug? Report it online, or post in #community:Codecademy-Bug-Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

Hey guys!

In lesson 5 there is a line that says an id can only be used once per page. Is this true?

Instead of creating a whole other id and ruleset, why can’t I just put the value (ex. font-family: cursive;) in the .title ruleset? I tried it and it works and seems like a quicker way to do it.

So the purpose of the lesson was to teach you the meaning of the ID attribute and how to implement it. The best possible way of using it depends on the project you are working on and your personal style. So all the selectors provided to us are the basics and commonly used ones. How we use it in our code would depend on us. But the lesson is for our understanding only.

At this point, the lesson still has a red border which is not at all looking good. But it is there for our understanding.

1 Like

I don’t understand the need to a more restrictive ID selector when you have the class selector. It seem that you could create a class that has the styling you want and just use it for one element on your page. Can someone provide a practical example of where an ID selector has clear benefits over a class selector?

1 Like

Why do we need id attributes while we can style the title with class?

Hi, an ID selector is more important for JavaScript and for links on the page too. For example, you can have this code somewhere in the beginning of your HTML page:

<a href="#chapter-7">Chapter 7</a>

If a user click on the link, the page will “shift” to the element with the attribute id=“chapter-7” rendered at the top of the browser window, so they don’t need long scroll down the page to see it.

3 Likes

I just had a long conversation with my coding mentor, who has been doing web development for more than 20 years. He told me that he has adopted a fairly common best practice to avoid the ID selector when you can use Class instead, which echoes the sentiment of your comment.

His explanation was that it’s better/safer for your code long-term, either as your project evolves, or it needs to be maintained/changed at some point in the future. Because ID selectors can only occur once in a document, and larger more complicated projects might end up repeating code somewhere down the line, a rogue ID selector could cause problems if it ends up showing up more than once and it was overlooked when the changes were made. So unless you need an ID selector (such as dusank357 observed above, for anchor links, or forms, or JS functions) then it is most often better to go with the creation of a Class selector.

There seems to be an issue with the question. My answer wasn’t accepted with spaces like id = 'article-title' but it was accepted without them like id='article-title'.

Hi, remember that inside the angle brackets a speace is used to add another attribute. Since the browser will always try to interpret your code, it will read the id attribute as complete after the space you added. Then the = sign was treated as a not valid attribute. Hope it makes sense!

Hi, I have a question. So I believe what the class meant to be used one per page is that the id name has to be unique.

Earlier in an HTML project, it was requested to add specific ids to each <section>. This is all in the same .html document, so I am a little confused here. Thanks.

<main>
      <section id="blog">
        <article>
          <p>New York City is made up of five boroughs which include Queens, Manhattan, Brooklyn, the Bronx, and Staten Island. The city is the home of approximately 8 million people. In 1876, France gifted the City of New York what is known as the Statue of Liberty, which is currently located on Ellis Island commonly visited by tourists. However, it took 10 years to assemble and therefore wasn’t unveiled until 1886. Another tourist destination is Times Square. Times Square is commonly known for the big buildings, Broadway shows, and bright neon signs. This famous location was named after The New York Times after the Times moved to that location. Prior to that, it was named Longacre Square. New York City is also known for its bridges that connect the boroughs and allow ease of transportation.
            </p>
          </article>
      </section>
      <figure>
        <img src="https://content.codecademy.com/courses/Semantic%20HTML/statue-of-liberty.jpeg" alt="Statue of Liberty">
        <figcaption>
          This is the Statue of Liberty, a popular tourist attraction located on Ellis Island.
        </figcaption>
      </figure>
      <aside>
        <p>
          New York City is very popular for the variety of great food it has. Some of the top food items in NYC include:
        </p>
        <ol>
          <li>Pizza</li>
          <li>Bagels</li>
          <li>Burgers and Sandwiches</li>
          <li>Ramen</li>
          <li>Tacos</li>
          <li>Pasta</li>
          <li>Desserts</li>
        </ol>
      </aside>
      <section id="media">
        <article>
          <h2>The Scenery in NYC</h2>
          <p>
            While the view in the city is beautiful, the sounds are not as lovely. Below you'll see an example of the view and the sounds you'll deal with in NYC on a daily basis.
          </p>
        </article>
        <video src="https://content.codecademy.com/courses/Semantic%20HTML/nyc-skyline-timelapse.mp4" controls>Video not supported</video>
        <embed src="https://content.codecademy.com/courses/Semantic%20HTML/nyc-skyline.jpeg">
        <audio controls src="https://content.codecademy.com/courses/Semantic%20HTML/nyc-sounds.mov"></audio>
      </section>
  </main>

Ids and Classes can be assigned as many times to as many elements as you want because of styling. This will make more sense when you learn CSS.

Thank you, my confusion is because the lesson says the following:

SELECTORS
ID
Oftentimes it’s important to select a single element with CSS to give it its own unique style. If an HTML element needs to be styled uniquely, we can give it an ID using the id attribute.

<h1 id='large-title'> ... </h1>

In contrast to class which accepts multiple values, and can be used broadly throughout an HTML document, an element’s id can only have a single value, and only be used once per page.

Ok. Outside of CCs lessons don’t use the ID attribute unless it is because of js you are using. It’s a way to keep your code clean.

1 Like

Thanks for the tip. I will do so.

1 Like