CSS inner id selectors

I've got below id selectors in a CSS file. Headerphoto and logo-box are inner id-selectors of header id. Do I really need to add those two as inner id-selectors? I can add them as just normal id selectors. What is the best way of doing this? What are the pros and cons?

Thank you!

/* Header styles */
#header {
    position: relative;
    hei开发者_StackOverflow社区ght: 176px;
    text-align: left;       
    margin: 0; padding: 0;  
    background: #FFF;
}

#header #headerphoto {
    position: absolute;
    right: 15px ; top: 15px;
    width: 455px;
    height: 156px;
    background: #FFF url(headerphoto.jpg) no-repeat;
}

#header #logo-box {
    position: absolute;
    left: 15px ; top: 15px;
    width: 280px;
    height: 156px;  
    background:#1c1e27;
}

It doesn't matter as long as only one of #headerphoto and #logo-box exist on each page and you're sure the structure for these three elements will be the same.

It only really matters to add the #header ID if, on some pages, #headerphoto and #logo-box appear in elements that don't have id="header", your stylesheet is used by all these pages, and you want the styles to apply if and only if these elements are in that one. But in such a case, that'd make your page structure rather inconsistent, wouldn't it?

Regarding performance, whether it's faster, slower or the same to nest ID selectors, I don't care, and neither should you, the stylesheet author, since ID selectors are already the fastest anyway.

you don't have to add the #header selector, but i've heard the page rendering is faster the more precise the selector was declared. In my opinion it doesn't matter.