Question

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 }

?

Answer 1

The word “caption” would indicate that it is not an unique identifier. If so, I would declare the caption as a class. The following would be completely legal and valid:

#content .caption { color: teal }
#footer .caption { margin: 2em 1em }