FAQ: Selectors - Classes and IDs

This community-built FAQ covers the “Classes and IDs” 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 Classes and IDs

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!

Even though we are learning CSS to add style to the website. But the current look of the web page is really ugly. The lesson could have instructed to create a beautiful website as well.

1 Like

I’ve been through the CSS lesson about the selectors and I have a question. So I’ve learnt that an HTML element can be selected by its type, id, class or even attribute. And now I know that at the specificity level: id > class > type. But what about the attribute? Does it have a specificity level? Where it might get “ranked”?

so agreed lmao like maybe a quick example with blatant stylizing but this course could def use a refresh.

Is there an easier way to give all the h2 elements the same class without having to go through each instance that the h2 elements appear?

Selectors:
Classes and IDs: Lesson 8 Part 1

"To demonstrate using classes on multiple elements, let’s give a few elements the same style.

In index.html , there are four <h2> elements. Give each of them a class of heading-background ."

h2 is a Type Selector, and can be targeted collectively without giving it a class. A type is a narrowly defined class, unto itself.

h2 {
    font-variant: small-caps;
}

The above selector rule will apply to all h2 elements in the document. It is commonly known as a, generic rule because it is so generally applied. As a type selector, is has specificity, 0 0 0 1 and is easy to override.

1 Like

When we look at how this is worded, heading-background when written as a class could be any heading element, or any text element that we are using visually as a heading.

For instance we could use some elements of a list as the list heading or subheading (this is reaching, but is valid)…

<ul>
  <li class="heading-background">Dairy and Eggs</li>
  <li>milk</li>
  <li>butter</li>
  <li>cheese</li>
  <li>eggs</li>
  <li class="heading-background">Produce</li>
  <li>lettuce</li>
  <li>carrots</li>
  <li>onions</li>
  <li>cabbage</li>
  <li class="heading-background">Meats</li>
  <li>chicken</li>
  <li>sausage</li>
  <li>liver</li>
  <li>veal</li>
 </ul>

We could still dial in the specificity so the LI can have added properties, such as font-weight: bold; or special color, etc.

li.heading-background {
  font-weight: bold;
  color: dark-gray;
}

Note that the class name is chained to the type selector. It means any LI with class name, …

It could instead be given a combinator rule on the parent…

ul .heading-background {

}

That would apply to any descendant of the UL which has that class name. Note the white space.

I apologize if this is redundant.

But what if there were hundreds or thousands of times h2 appeared in the code. Would the class, in this example, of heading-background have to be typed in to apply the class for h2 thousands of times over? Is there a faster way to do this in CSS or another way?

The style sheet only applies to one document, and if written with a decent outline there will only be a handful of headings.