FAQ: Learn CSS Selectors Visual Rules - CSS Setup Selectors - Chaining Selectors

This community-built FAQ covers the “Chaining Selectors” exercise in Codecademy’s CSS lessons.

FAQs on the CSS exercise Class Name

Join the Discussion. We Want to Hear From You!

Have a new question or can answer someone else’s? Reply (reply) to an existing thread!

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

Need broader help or resources about CSS in general? Go here!

Want to take the conversation in a totally different direction? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account, billing, Pro, or Pro Intensive? Reach out to our support team!

None of the above? Find out where to ask other questions here!

1 Like

Other FAQs

The following are links to additional questions that our community has asked about this exercise:

  • This list will contain other frequently asked questions that aren’t quite as popular as the ones above.
  • Currently there have not been enough questions asked and answered about this exercise to populate this FAQ section.
  • This FAQ is built and maintained by you, the Codecademy community – help yourself and other learners like you by contributing!

Not seeing your question? It may still have been asked before – try searching for it by clicking the spyglass icon (search) in the top-right of this page. Still can’t find it? Ask it below by hitting the reply button below this post (reply).

1 Like

Is there a difference between “h1.special” and “.special h1”? Will the computer treat these differently and how so?

The browser will treat them as entirely different.

h1.special

selects all H1 elements with the class attribute set to include special,

<h1 class="special">Special top level heading</h1>

whereas,

.special h1

selects all H1 elements that are children/descendants of a parent element with class attribute set to include ‘.special’.

<section class="special">
    <h1>Child top level heading in a `special` class container</h1>
5 Likes

There’s no difference when I am setting font-family: cursive; in CSS
What could be the problem?

1 Like

The font-family cursive doesn’t seems to work in my learning environment.

It is usually better to create a new topic. It’s hard to keep track of questions asked in the FAQ articles :slight_smile:


What is the browser you use? May I ask you to provide the HTML and CSS code you use and screenshot of the rendered page?

I am sorry, I don’t understand the problem.

1. Florence, Italy is a h2 element with class destination and it is written in cursive. So why do you think that it does not work?

I think I made a big mistake in interpreting the English. Cursief (sounds like cursive) in Dutch is the same as italic in English. So I expected Italic fonts…

Sorry…

1 Like

No need to apologize :slight_smile: I am glad it is all sorted out now :slight_smile:

1 Like

Why would it be the the h5 element “

By: Stacy Gray
” is not effected by the css

“.description h5 {
color: teal;
}”
?

It seems to be an h5 element as well, and I guess I missing the disconnect between that h5 element and the “Top Attractions” h5 elements.

I hope this question makes sense.

Hello @text2028556577,
As I understand, it is because “.description h5” only affects the h5 that are children to parents that have the “description” class. For example, in this exercise, all h5, except for “By: Stacy Gray”, are children of div elements that have the “description” class.

Why would you want to chain selectors instead of creating a new class and applying that to the HTML elements that you want to be styled?

For example: why would you create the h1.special chain rather than simply applying a new class such as class=“unique” to the h1 elements and then creating .unique{ … } in style.CSS? This would also allow the h1 elements to have a different styling to the other elements that have class=“special”.

Is it maybe just used when you are editing the code later and you realize that you want your h1 elements styled differently to the other elements with a class of special but have already given all of the h1 elements the class=“special” attribute?

1 Like

@joshbenadie071596366 This was exactly my question too! I don’t see what the advantage is of a chain, rather than just a unique class

Maybe because the “special” class is going to be used in other non-h1 elements, and you want all “special” elements to have x style(s) applied to them.
That would save you time instead of creating both the special rule, which targets all “special” elements, and the unique rule, which targets just the h1 elements that are special (or the unique elements if that’s a better way to view it).

“Is it maybe just used when you are editing the code later and you realize that you want your h1 elements styled differently to the other elements with a class of special but have already given all of the h1 elements the class=“special” attribute?”

I think you answered the reverse of your question lol, but I think you got it.

1 Like

How do you chain an HTML tag and an ID? For instance, is this correct?

HTML:
<body id= “pizza”> Burgers </body>

CSS: body#pizza { color: blue; }