Can you target with CSS an ID within ID?

Question

My example would be within an HTML file, that say you don't have access to change - only the CSS via a stylesheet. Can you target an ID within an ID the same as you can Classes?

#id1 #id2 {styles...}

similar to how you do it with CSS:

.class1 .class2 {styles...}

I could just be having a major brain fail here.

Answer 1

yeah, like this:

#one #two {
    color: purple;
}

will select for:

<div id="one">
    <div id="two"></div>
</div>

this is really not necessary though, because you are only supposed to have one id of the same name per page, so the selector #two {} would be fine by itself.

Answer 2

Yes, you can do that; it's perfectly valid. But it's also generally pointless, given that an ID has to be unique within a page, so just selecting the single ID ought to always be sufficient to select exactly the element you want; you shouldn't need any additional parent selector to qualify it, whether another ID or a class or anything else.

I can see one use case for it, where you have an element with an ID that is dynamic in where is appears in the page that could appear in different locations for whatever reason, and you want it to look different according to where it in the page it appears.

For that, it might be valid to have #id1 #id2 selector. But it's probably a fairly rare use case, and even for this usage, classes might be a more appropriate tool for the job.