In CSS, does it make sense or is it legal to nest an id in another id -- such as "#main #display img { ... }"

Question

In CSS, if it is

#main #display img { height: 80px }

that means all images within an element with id display that is within another element with id main. But does it make sense or is it legal since id seems to be just global names.

It is because SASS actually allows nesting and some code may nest it like

#main
  width: 700px

  #display
    img
      height: 80px

which is "id within id".

Update: this is because, supposedly, there should never be

#main #display img { height: 80px }
#sidebar #display img { height: 80px }

that is, there should never be two elements with an id display. So normally, instead of writing

#main #display img { height: 80px }

you may as well write

#display img { height: 80px }

Answer 1

Sure - if you have one style sheet on multiple pages, there may be scenarios where this actually makes sense ("if #display is a child of #main, show images this way, otherwise that way").

It's definitely legal, no problem.

Answer 2

It makes sense. It's very restrictive, but that might be just what you are looking for.

E.g. if the same CSS is used with many different documents where the structure may vary.