CSS: Nested Elements - Selectors Unexpected Syntax Change

https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/intro-to-css/modules/learn-css-selectors-visual-rules/lessons/css-setup-selectors/exercises/nested-elements

My instructions were to "Add a selector that targets all of the h5 elements nested inside elements with class .description"

The way I was just previously taught to do this was to write:

h5.description {
}

However, this didn’t work, despite existing further up in my code:

h2.destination {
}

When I asked for the solution, I saw that the code should have been written as:

.description h5 {
}

Why the change in syntax?

Hey there @netwhiz65092!! Welcome to the forums :grinning:

I would imagine when you used h2.destination as a selector, you were using it slightly differently.

h2.destination targets <h2> elements with a class of destination:

<h2 class="destination"> Random content </h2>

Were as the selector .description h2 targets <h2> elements nested inside an element with a class of description:

<div class="description">
  <h5> More Random Content </h5>
</div>

Hey! Thanks for the explanation. I won’t lie, I get it, but it’s making my brain hurt a bit!

I suppose I’ll have a better understanding when I get round to actually using them again for their intended purposes.

Thanks again!

1 Like