I was going to "nest" the CSS ids like this

#content #caption { color: teal }
  ...

#footer #caption { margin: 2em 1em }

because that's the way SASS (a CSS generator) can do nesting for... but then in one HTML document, we cannot have two ids with the same name, isn't that true, so the above nesting won't work or won't work well. (esp if document.getElementById() or $('#caption') or $('caption') is needed to select the element).

We can use

#content #content_caption { color: teal }
  ...

#footer #footer_caption { margin: 2em 1em }

but then why 1 more level of nesting? why not just

#content_caption { color: teal }
  ...

#footer_caption { margin: 2em 1em }

?