FAQ: Selectors - Chaining

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

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!

What could be the other examples of chaining besides an element and a class? Can chaining be done on other combinations?

Are there other combinations for chaining other than using a type selector and class selector together?

New to CSS and there is 1 thing I dont understand about this exercise. All the h2 elements start with the code below

In the exercise we are instructed to add the CSS rule below

h2.destination {

font-family: Tahoma;

Shouldn’t the correct rule be as follows based on the HTML code above.

h2.destination heading-background {

font-family: Tahoma;
}

Sorry, here is the HTML code I was referring to

In the exercise, the elements with the tag <h2 class='destination heading-background'> have two classes. One class is destination while the other class is heading-background. Even though both the classes are written in the same quotes, the space between the two class names makes the classes separate. An underscore or dash can be used to write a single class name comprising of two words e,g. heading-background.
In index.html of the exercise, there is an element <h2 class='heading-background'> More Destinations </h2>. This element has only one class.
If we want to target the h2 elements having the destination class, then h2.destination is sufficient to target the desired elements.

1 Like

Thanks. You learn something new everyday
I am attempting to learn CSS and that is quite complex
Appreciate your help

hey everyone!
New to the course, I’m curious about something, does chaining have any advantages over the previously mentioned attribute selector?
in the chaining page, the answer is supposed to be

h2.destination{
font-family: Tahoma;}

I tried using the attribute selection method:
h2[class*=‘destination’]{
font-family: Tahoma;}
and as far as I can tell, both work. Are they mutually interchangeable? I did notice though that the chaining methode seems to supercede and override the attribute selection method when both are place in the stylesheet!

Any insight about this topic would be very appreciated :smiley:

I noticed Chaining and Descendant aren’t more specific from one another, so I guess my question is it safe to say which ever one will compute will depend on the order we list them on the style.css?

I didn’t have a tahoma typeface font installed on arch linux firefox, so even though I did the exercise right and passed it, the font didn’t change. I had to install the aur package ttf-tahoma for it to work. This is a free replacement from the Wine project. Another workaround is to try another font-family like monospace

in this exercise we are asked to add the following in css:

font-family: Tahoma;

it is pretty straight forward, but this added some doubt in my mind.

isn´t best practice to code with lowercase in html/css only, or am i mixing things up?

I am also new. But I have seen another example in CodeAcademy CSS cheatsheet on the selector specificity, which is type#ID. Personally, I don’t think that’s a practical way or recommended way to use since it is generally better to have a unique ID on a single page for whatever types. But it is allowed to use type#ID chaining if you really need it.

If a <p> element also had a class of special , the rule in the example would not style the paragraph. Why is that so?

chaining will not override attribute selector it actually depends. if attribute selector is arriving first and then chaining for example:

h2[class*='destination'] {
  font-family: monospace;
}

h2.destination {
  font-family: Tahoma;
}

then chaining will override the attribute selector but if chaining is arriving first then attribute selector then attribute selector override the chaining method.