CSS: Nested Elements - Selectors Unexpected Syntax Change


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>

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