FAQ: Selectors - Multiple Classes

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

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!

Why can’t we use only one world declaration to class attribute like class=“title” and then in CSS doc write two or more declaration inside one ruleset like:

title {
color: teal;
text-transform: uppercase;
}

instead class=‘title uppercase’
.title {
color: teal;
}

.uppercase {
text-transform: uppercase;
}

Thank you

2 Likes

Hi @lanakoshelieva
not sure if I understand your question (what is a world declaration?), I’ll try to answer it anyway:
You can address a combination of classes with one ruleset like this:

<h1 class=“title uppercase”>

.title.uppercase {
  color: teal;
  text-transform: uppercase;
}

If you want to reuse the title and uppercase classes in other combinations, you can write them as you did.

1 Like

Sorry, it should be “word”.
Anyway thank you, The code I whote is from a lesson and I couln’t get why there are two ruleset.

Because you might want to use .title and .uppercase in different combinations. It’s more generic like that. But you could use one selector like title-uppercase for the above ruleset.

1 Like

Is it proper to put classes in every tags for styling, or is it better to make a simple code to make it easy to read?

Instead of using

.title {
color: teal;
}

.uppercase {
text-transform: uppercase;
}

Can we just use one class and then use the h1 and that class to chain the them.

h1.title {
color: teal;
text-transform: uppercase;
}

@mtf Can you please help?

There’s nothing inherently wrong with your idea. It’s just important to think in terms of brevity and having the least number of selector rules possible to aid in long term maintainability. Having separate classes for specific properties is akin to using variables that can be re-used throughout the style sheet on otherwise independent elements.

4 Likes

Hi,

About this code:

HTML

Top Vacation Spots

CSS

h1 {
color: maroon;
}

.title {
color: teal;

}
.uppercase {
text-transform: uppercase;
}

is element weaker than attribute class in the ruleset? Because maroon does not work anymore. It is always like that?

Yes. An element is a TYPE, which has lower specificity, 0 0 0 1 than a class, which has specificity, 0 0 1 0.

Yes. Higher specificity trumps even the cascade order. The H1 selector rule above, even if written below the class selector rules can never override the class.

In the above example, we can write an overriding rule by changing the declaration in the .title class, but only as it applies to H1.

h1.title {
    color: orange;
    background: light-gray;
}

That says an H1 with a title class will be orange in color with a light gray background. The selector rule now has specificity, 0 0 1 1, which trumps a class selector.

4 Likes

yeah the same thing i think this is the best way . it’s just so confusing with multiple classes