FAQ: Selectors - Multiple Classes

Frequently Asked Questions Uncategorized
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

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 Language Help.

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

Need broader help or resources? Head to Language Help and Tips and Resources. If you are wanting feedback or inspiration for a project, check out Projects.

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 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!

4

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

3 Likes
5

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
6

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.

7

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
8

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?

9

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?

10

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
11

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?

12

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
13

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

14

In the style sheets is it common practice to add a space after the : or can you not include the space?
For an example,

.title{
color: teal;
}

or without a space

.title{
color:teal;
}

15

Whitespace is free and most times very helpful to the reader. There is no benefit gained by scrunching things together. I would even recommend a space before the curly brace, as well.

.title {
    color: teal;
}
1 Like
16

Here is an element with 2 class values.

<h1 class='title uppercase'>

the code beneath is using both values as selectors to give declarations at the same element.

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

Problem: Is unnecessary, you can stack declarations in one selector.

I need feedback to understand ¿why that practice is relevant?

Thank you.

17

You are referring to the exercise Multiple Classes.

In the exercise, there is only element with the title class or the uppercase class,

<h1 class='title uppercase'>Top Vacation Spots</h1>

So, yes you could use just one class and/or consolidate the two css rules into one single rule, since the .title and .uppercase selectors are targeting the same element.

But looking beyond the exercise, one can see why using the two rules can lend to more flexibility.
Suppose in the index.html file of the exercise, we wanted to make the author name as uppercase. We may also want to make certain phrases uppercase. All that we have to do is add the uppercase class to those elements in index.html, but we don’t need any new rule in style.css e.g.

<h1 class='title uppercase'>Top Vacation Spots</h1>
<h5 class="uppercase">By: Stacy Gray</h5>
...
<div> ...,monuments from the <span class="uppercase">richest cultural flowering</span> the world has known...

All that we need to do is add the uppercase class to the relevant h5 and span elements. But, we don’t need to add any new rule to the css.

Contrast this with the situation if we had consolidated the rules into,

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

Now, we can’t use the above rule to style the h5 and span elements. We would need additional rule(s) in the CSS,

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

.uppercase {
  text-transform: uppercase;
}

If we keep things more general, then it is easier for us to go from wider to narrow (more specific) targeting and customization of elements.
If we start off by using a specific selector/rule, then it is more difficult to re-use some aspects of that rule for more broader targeting/customization without resorting to unnecessary duplication.

3 Likes
18

I understand, nice explanation.

Thank you.

1 Like
20

I can’t use more than one class as given in the practice.

<h1 class="title" class="uppercase">Top Vacation Spots</h1>

This is what it’s supposed to be right? But it’s red like I’m getting an error and I can’t proceed, the error says “Duplicate of attribute name [class] was found.” That means we can’t add multiple classes to one element, then why is it given in the instructions, I’m confused.

Any help will be appreciated.

21

You can’t use multiple class attributes but multiple classes.

This is supposed to be written like this:
<h1 class="title uppercase">Top Vacation Spots</h1>

4 Likes
22

Ohh, alright thanks a lot!

1 Like
23

Imagine that you didn’t know how to read, write, or barely speak yet.
First, you got taught letters when you barely knew very many words.
Then, you got taught to put the letters together to spell something simple like C-A-T.
When that was the only word you knew how to spell, maybe you still thought to just use a picture of a kitty and then you would not need to bother to spell to communicate.
When a skill in technology is taught in this course, it is being taught like a building block; the fact that you can use more than one class is like teaching about the letter ‘c’. Later, you’ll have learned all the ‘building blocks’ of CSS and you’ll start to put them together in modular designs that make something that look like Twitter.
These websites that we’re practicing on look like Craigslist or something else from 90’s style.
The simple building block about multiple classes at a time is why Twitter looks phenominal and is still maintainable.
Ignoring the skillset of using multiple classes is like ignoring spelling because kitties are easier to draw than spell; however, then you get more advanced at language and learn there are words like C-A-T-A-S-T-R-O-P-H-E which are hard to draw.
Chinese is an imagery-based language more than Anglican languages are and English can communicate much the same information as Chinese can with only 26 letters and huge number of words whereas Chinese has huge number of characters and none or not a lot(?) of words.
There are templates in CSS out there already, and that is a lot like being handed a Chinese character which is just one character and yet it says so much. Take a look inside the source of those templates, though, and you’ll see multiple classes used per HTML element.