FAQ: Selectors - Multiple Selectors

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

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!

If possible,
Can someone please describe a use case where you would use multiple selectors and not just a single class?
In the exercise,
h1,
.menu {
font-family: Georgia;
}

It shows we can applying the same styling to both h1 and .menu, but if we needed to use the font-family Georgia, why would you not just use the .menu class in the h1 element?

How come you must use “.” in front of li, but when using the selector h5, you don’t need to use a “.”

Is there supposed to be a dot (.) before a selector in stylesheet.css ?

Well, yes and no.

if i have a paragraph:

<p>i am a paragraph</p>

and i want to changes it color in css, i don’t use a dot:

p {
  color: green;
}

now let’s say i have a whole of paragraph and i don’t want to color all of them green, i can use classes:

<p class="green">i am going to be green</p>
<p>i am a paragraph</p>
<p class="green">i am going to be green</p>
<p>i am a paragraph</p>

now, to tell css we have a class, we use the dot:

.green {
  color: green;
}

now only the elements with class green, become green.

So, recap: to select a html element, the css selector is without a dot, if you need to select a class, you use the dot. This will be covered later in this track. I hope i answered your question.

https://www.codecademy.com/forum_questions/55f953949376762e80000514

2 Likes

Multiple selectors are written with a comma between each selector but what about when we did not use it?
I’ve come across with this two ways of selectors on CSS in which they only differ on the use of comma. Am I right to say that the use of comma is only apllied when multiple selecting over child selecting?

li h4 {

  • color: gold;*

}

li,h5 {

  • font-family: monospace;*

}

Hi, in this particular case it would work, but semantically it seems weird, because h1 element probably don’t any relationship only to the element with the menu. h1 element rather has a relationship to the whole content of the page.
A practical case of using multiple selectors could be for example setting common features for headings like this:

h1, h2, h3 {
    font-family: Verdana;
    color: #303030;
    font-weight: 500;
}

In this example I’ve set the same font, color and “boldness” for the common used types of headings. After that I can create selectors for the h1, h2, and h3 separately and set only size of each of these headings. For example:

h1 {
    font-size: 24px;
}

h2 {
    font-size: 21px;
}

h3 {
    font-size: 18px;
}

So I cannot repeat declarations for font, color and weigh in these three pieces of code, because they are the same, and the only different property is size.

I apologize for my weak English, because it is not my native language :slight_smile: I hope I’ve brought a little bit more clarity!

Dusan

2 Likes

Not applicable to a style sheet. They have no meaning.

1 Like

Hi Roy,
thank you very much for your comment and the correction! I probably expressed it inaccurately.
I wanted to say that assigning a class name “menu” to an h1 element only because of the same font is not “semantic” to me :slight_smile: I can’t help myself, it just doesn’t make sense to me.
Nevertheless, I’d really appreciate your opinion about proper using classes vs multiple selectors like @chadh2125265963 described above. It’s a very interesting topic maybe not related to semantics but to good practices. The whole CSS is a large area and I know that I need to learn a lot about it.
Your comments are very valuable to me (and I think that not only to me), I sometimes copy them to my personal notes and am grateful for them.
With thanks,
Dusan

1 Like

You are right about giving class names that mean something the same way we would assign variable names in a program. Problem with the way CSS is taught is it uses some really poor examples that tend to mislead the learner. They end up using CSS like a box of Crayola crayons and use names like ‘red’ or ‘verdana’, etc. Describing things by how they look goes against the grain of accessibility.

An HTML document is sectioned, no matter what tags we used. In the past we used to use ID and CLASS to describe the key sections… header, nav, main, section, aside, footer. Eventually this got written into the recommendations and became valid HTML elements and we could give up that particular usage.

Given that a well formed document follows an outline, the way we structure the document sections conveys a lot of information about how they relate, or are grouped. The relationship or grouping is a class. It has nothing to do with appearance.

We cannot change how CSS is introduced, but we can turn focus to the semantics you describe, early on, and put the potential bad habits in our rear view mirror.

2 Likes

Thank you for your explanation. I admire your deep insight and wisdom and look forward to your further comments on lessons I haven’t been to yet… There are never enough good teachers!

1 Like