FAQ: Selectors - Chaining and Specificity

FAQ Uncategorized
#1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

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

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!

#2

Hi, could somebody who has access to lessons take a look. After the code

.li h4{ color: gold;}

h4 { color: dodgerblue;}

there is a discription " The elements stay gold because there is a more specific selector for <h4> elements you wrote in the last step. Because of the more specific CSS selector ( li h4 ), the more general selector of h4 will not take hold."

But the truth is that in the browser the text is displayed in dodgerblue, and after only this code .li h4{ color: gold;} the text does not become gold.

#3

I noticed this too. I think there’s a problem with the exercise, but I cannot for the life of me figure out what would turn that text gold.

Edit: I figured it out.

This is what the code should be. There seems to be an error where it still accepts the code as correct if you put a period in front of it.

li h4 {
  color: gold;
}

h4 {
  color: dodgerblue;
}
1 Like
#4

Chaining and Specificity:
< li >< h4 class=“destination” >Jackson Hole Wyoming< /h4 >< /li >

When using h4 selector the color will not change since li h4 selector has more specificity.
li h4 is more specific than h4. If changing the color by using the following.

li h4 {
color: gold;
}

li h4 {
color: rgba(14, 166, 233, 1);
}

The color will change the to color: rgba(14, 166, 233, 1);
The second selector has precedence over the first selector.

or

li h4 {
color: gold;
}
li .description {
color: rgba(14, 166, 233, 1);
}
The color will change the to color: rgba(14, 166, 233, 1);
The second selector has precedence over the first selector.

1 Like
#5

Question: would descendent-specific selectors override id or class selectors, or chaining?

#6

What if i write: h4 li

instead of:

li h4 {
color: gold;
}

is there a problem with the order???

#7

li h4 will target <h4> elements nested in the <li> elements.
h4 li will target <li> elements nested in the <h4> elements.
So, order does matter.
For the exercise, only the first approach will turn the selected elements to gold.
There are no <li> elements nested in the <h4> elements in index.html for this exercise, so the second approach won’t do anything.