FAQ: Selectors - Multiple Classes

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

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.

2 Likes
18

I understand, nice explanation.

Thank you.

1 Like