In CSS, can "#footer #caption" coexist with "#content #caption"?

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

no reason for that. id is a really heavy selector, it should be enough to change the styling rules. if not append the #content before or change the selectors of the rules that are winning.

Answer 2

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 }

Answer 3

If there are no two elements with id="caption" on the single page, it's perfectly OK. However, I guess from the naming (content & footer) that there's more than one with id = "caption", which is very bad. You should remember that id must be unique! Use "class" instead, like

#content .caption { }
#footer .caption { }

Answer 4

First, something like "caption" really does sound more like a class:

You say: this is *the* footer (specific id), but this is *a* caption (general class).

Here's another way you can nest the selectors in Sass:

.caption
  margin: 2em 1em
  font-weight: bold
  #footer &
    background: teal
  #content &
    background: red

(The "&" references whatever it's contained in.)