Intro to CSS: Confusing part in the descendant combinator explanation

[Daniel-Fdz]

Checks

• This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• I have thoroughly read and understand The Odin Project Contributing Guide
• Would you like to work on this issue?

Describe your suggestion

Hello, I was reading the selectors section in the Intro to CSS lesson and in the part about the descendant combinator I found a piece of code with its explanation a bit confusing. Here I have a screenshot:

If I understand properly, the div in line 5 is "element A" and the div in line 7 is "element B". In the explanation below the code it says that the elements being selected are "B" and "C". If my understanding is correct, the element selected wouldn't be "A" and "B"?

Because I see "C" as the content inside the div in line 7.

Thank you for taking the time to read this.

Path

Foundations

Lesson Url

https://www.theodinproject.com/lessons/foundations-intro-to-css#selectors

(Optional) Discord Name

No response

(Optional) Additional Comments

No response

[MaoShizhong]

I think the intent is that the comments resemble contents inside that div, i.e. A refers to the div on line 3, with the A comment being that div's "contents" (and same for others). C and D make more sense this way, but I agree with how A and B are laid out in particular, it's confusing.

My suggestion, if maints are happy with it, is to get rid of the comments entirely and reword that sentence to reference line numbers instead (e.g. with the `contents` class (on lines 5 and 7) - adjusted once the comments are removed).

[Daniel-Fdz]

I see, I understand that point of view now but I still find it a bit confusing due to the indentations and place of the comments shown in the code. In my opinion, I think the solution you suggested could avoid confusion or maybe changing the comments a bit.