FAQ: Learn CSS Selectors Visual Rules - CSS Setup Selectors - Nested Elements

That is an H1 with class attribute, description.

<h1 class="description">Has class</h1>

That is a descendant selector, where description is the parent element class with child element H5.

<div class="description>
    <h5>Descendant selector</h5>
</div>
2 Likes

I have the same question! :crazy_face:

Thank you for this clever explanation! Can you tell me if my understanding is right? (I added an opening parenthese so you can see the code)

.description {color:blue;}
h5 {font-weight:bold}

<(h1 class=“description”>This Title is BLUE, but not bold
<(p>This paragraph is neither blue, nor bold

<(div class=“description”>
<(h5>This title is blue AND bold without requiring any class
<(p>This paragraph is blue because it’s nested in a div that has a class of “description”.


<(/div>

If I am right, I can say that it had never been clear until this day!

1 Like

I have the same question

I am tot new to this and this might sound kinda dumb but i still don’t understand the nesting hierarchies of the elements. I am a visual learner and would really appreciate if there was some sort of graph that I can look at to understand this better. thank you in advance.

is there any difference between “” and ‘’ ??

In this exercise, why didnt I have to include the class attribute in each of the h5 elements?

No, but the convention is to use double quotes on attributes.

src="images/pic.png"

We are targeting h5 elements in description class. So we write in that fashion.

Does it makes sense ?