Question about chaining CSS selectors and specificity

Hello! I am currently completing the CSS Setup and Selectors lesson and I am on Exercise 14 about chaining and specificity. I understand the basics of what is going on here, but I am a bit confused about one of the tasks.

https://www.codecademy.com/courses/learn-css-selectors-visual-rules/lessons/css-setup-selectors/exercises/nested-elements?action=lesson_resume&course_redirect=learn-css

Earlier, in a previous exercise, they showed us you could chain selectors by adding a class selector to a tag

For Example:

```
h1.special {

}

But then in the next exercise it asked me to add a selector that targeted the “h5” element with the class “description”. So I wrote mine like this:

h5.description {

}

Which worked in the browser but it was marked red in the exercise. When I checked the code, it was supposed to be written like this:

.description h5 {

}

So my main question is this…What is the difference between the order here? Is there a specific reason it had to be written like this? Or could it be either way? Thanks in advance for the help!

these selectors work different, h5.description selects all h5 elements which have class description:

h5.description {
    color: red;
}

<h5 class='description'>i am red</h5>
<h5>i am not red</h5>

where as .description h5 selects all h5 elements which are a child of element with class description:

.description h5 {
    color: red;
}

<div class='description'>
    <h5>i am red</h5>
</div>
<h5>i am not red</h5>

the h5 element doesn’t have to be a direct child of element with class description

7 Likes

Ah gotcha…thanks! :grin:

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.