Nested Element question

Hello.

During ‘CSS setup and selectors’ tutorial - Ch.13 Nested Elements, the class attribute comes before the h5 tag: .description h5 {…}.

However, previously in Ch.12 Chaining Selectors, the class attribute came after the h2 tag: h2.description {…}. Why is this so? I thought the class attribute came before the tag according to the rule of Specificity.

Good question. I am a little confused myself! I am wondering if it doesn’t matter. I am thinking I have done both. Maybe that can be answered as well. Have you tried doing it both ways to see if anything changed?

.description h5 and h2.description work very differently.

description h5 will target all level 5 header elements which have a element with class description as parent:

<h5>i am not targeted</h5>
<div class="description">
   <h5>i am targeted</h5>
</div>

where as h2.description targets all level 2 header elements with class description:

<h2>i am not targeted</h2>
<h2 class="description">i am targeted</h2>
<div class="description">
   <h2>i am not targeted</h2>
   <h2 class="description">i am targeted</h2>
</div>