How to select span element inside multiple div classes and id's? - html

Question

I always wondered how can you select an element that is deeply buried in other elements that have classes and id's ?
For example :
<div class="container" id="footer">
<div class="sixteen columns"><span>some text here</span>
If I want to select element then what I would do is write in CSS the following :
.container #footer .sixteen .columns span {
font-weight: bold;
}
Unfortunately it seems that this method is not valid or recognized by browsers.
Let's say that I don't want to give any general styles to 'sixteen columns' class or span itself. I just want to apply very specific styles to this very specific element.
How should I select that span element ?

Answer 1

Given your code:
<div class="container" id="footer">
<div class="sixteen columns"><span>some text here</span>
</div><!-- I've chosen to close the opened div element -->
Your selector cannot work, but it is definitely "recognized by browsers." The problem is that it is not, as you say, 'valid' (for the HTML structure that you have).
The problem is that, in CSS, white-space implies an ancestor-descendant relationship, so:
E F
Selects an element, matching selector F, that is a descendant of selector E; your own selector:
.container #footer .sixteen .columns span
selects a <span> element, within an element of class 'columns', within an element of class 'sixteen', within an element of id="footer" itself within an element of class 'container'; giving HTML:
<element class="container">
<element id="footer">
<element class="sixteen">
<element class="columns">
<span></span>
</element>
</element>
</element>
Which bears no resemblance to your own HTML. As white-space establishes an ancestor-descendant relationship, the corollary is that no white-space implies the same element, which is what you were aiming for, I think. Omitting the white-space, then, gives the following selector:
#footer.container .sixteen.columns span {
/* CSS here */
}
This selector is, probably, overly complex (given that an id uniquely identifies an element1), and could be re-written as simply:
#footer .sixteen.columns span {
/* CSS here */
}
Or even, if you're willing, and able, to sacrifice some specificity:
#footer span {
/* CSS here */
}
Note that a class-name is often used in JavaScript to denote a state, state-change or interaction of some kind; so it's not definitively redundant to combine an id with a class (#footer.container), but if the class is not dynamically added or removed, it probably is redundant and unnecessary. As with all things in web-development, it's worth experimenting to find out what works for you; contemporary browsers are fast enough for the most part, that adding a class-name to the selector isn't going to slow things down substantially, but beware of time-critical use-cases, when it's best to remove everything that's not absolutely necessary.
References:
CSS Selectors (and combinators).

Answer 2

with:
#footer > .sixteen.columns > span
Your selector does not work because you have spaces between selectors which refer to the same element.
e.g. .container #footer
But the space reads: "find an element with the id footer that is a descendant of an element with a class that is container". But you mean: "find an element that has the class container AND the id footer" which you can do by concatenating them without a space:
e.g. .container#footer
See: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

Answer 3

Rearrange your selector like this
#footer.container .sixteen.columns span {
font-weight: bold;
}
<div class="container" id="footer">
<div class="sixteen columns">
<span>some text here</span>
</div>
</div>

Answer 4

#footer span { font-weight: bold; }