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

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.

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

1 Like

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.

What order should I use when organizing my CSS sheet when it comes to chaining? Should I place all my type, class, and id selectors together? An then when you chain, what is the best way to stay organized?

@mhs_007 for your question, we have to apply the notion of Selectors Weights. Each selector has a specific weight that in some way puts a level of importance on that selector. In the case where we use a type selector with a class attribute selected as selector to one HTML element and Chaining for the same HTML element, we will apply the same weight to that combination (type + class). So, because both selectors have the same weight, the last one will win because of the specific property of CSS that the last declaration block overrides the others with the same selector (not in the way that you declare, but in weight).

@suncedar3031 there isn’t a law that dictates how you should organize your external CSS file. In this case, I am answering you in the same answer to @mhs_007, because knowing the weights of each selector and their combination weight has a huge impact on the way that you must put your declaration blocks in such a way that one doesn’t override another (because of the inner property of CSS). Keep this in mind when you are creating your file so that you won’t suffer a lot. For me, I always try to make a pre-structure of the whole HTML before starting with CSS. Once I have the HTML structure, I start thinking about positioning first and then styling, and in that way, I go about putting classes and IDs as demanded by the final style. Another thing to remember is that each programmer or company has their own rules for how to create files to ease the process of understanding and coding.

1 Like

Why no mention of the standard term for chained selectors being “Compound Selector”? Only takes one sentence. Students should know this.