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

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?

1 Like

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

3 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

5 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.

4 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

Hi Eldermoura. If no comma is used then rule is set to select all h4 elements inside li elements. If you choose to use comma then all li and h4 elements of the code are selected regardless whether they are in or outside each other. Suggest you to study cheatsheet ‘CSS descendant selector’ and CSS Selectors Reference. Have a good day !

What’s the preferred practice, putting each selector in a multiple selector CSS rule on its own line, like what was used in the example lesson, or on the same line?

1 Like

Again, it really comes down to readability, and if your organization requires one’s code to follow their style guide. For something so inconsequential it would be ludicrous to suggest that there is a preferred form. It might simply come down to how you like it, and call it a day. Nobody is going to object to whichever you choose.

Keep in mind that the comma (,) does not appear in any other selectors.

ul, ol, dl {
  list-style-type: none;
}

or,

ul,
ol,
dl {
  list-style-type: none;
}

are on equal footing.

One consideration would come into play if you were using multiple combinator selectors. To make that visible only makes sense.

2 Likes