Fastest Option (I think)
I haven't tested, it is just based off how I understand things to work. Assuming those are the only two cases, you should do this:
#a {
/* Default rules here */
}
#b #a {
/* Override rules here */
}
The lone default #a
id selector is about the fastest selector there is, since the element should be unique on the page and there is only one check needed to apply the rules. So set a default style with that.
The override rule will be nearly as fast, as the browser will encounter the unique id of #b
doing one more check up the DOM tree from #a
, and apply those rules instead (if it is a child of #b
obviously). Of course, we are talking minor differences in efficiency here.
Do realize that any styles applied to #a
through those selectors will have a fairly high specificity (especially the nested version), and therefore not able to be overridden by any mere .someClass
css you or javacript may try to apply. But that may be totally fine, depending on your context. It is this high specificity that makes changing css on those elements later that cause some to steer away from using id's at all for applying css properties, but I feel that it all depends on the context of the site whether it is a good or bad thing to use id's for that.