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 () 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 () below!
You can also find further discussion and get answers to your questions over in #get-help.
Agree with a comment or answer? Like () to up-vote the contribution!
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.
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.
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.
Hello! I am very much enjoying my time going through the html and css courses here on the site. I did have a question concerning css rule sets that come from the specific lesson (12/14) concerning Chaining and Specificity in regards to selectors.
The lesson wants you to create a ruleset that specifically selects h4’s that are listed under li’s. The intended solution for the first step is:
li h4 {
color: gold;
}
I was having some issues with this given answer. In the given style.css file for the lesson, I was putting this css ruleset on line 1 of the file. In previous lessons, it specifically told me to place rulesets on certain code line #'s, and some lessons it did not specify. Everytime I would type this code into the stylesheet at the top of the file, it would not read as the “correct choice”. As soon as I placed the exact code on line #69, the first step was satisfied.
So my question is, does placement of a ruleset amongst others have significance? ie, placing a ruleset on line#'s above others have certain implications?
Or, does this specific exercise need to be adjusted to specify “place the following code on line #X” to satisfy the lesson’s objective?
) below.
) to up-vote the contribution!