¿Cómo seleccionar el elemento span dentro de múltiples clases div e id?

Dado tu código:

 
 
some text here 
 

Su selector no puede funcionar, pero definitivamente es ” reconocido por los navegadores “. El problema es que, como dices, no es ‘válido’ (para la estructura HTML que tienes).

El problema es que, en CSS, el espacio en blanco implica una relación ancestro-descendiente, entonces:

 EF 

Selecciona un elemento, haciendo coincidir el selector F , que es un descendiente del selector E ; tu propio selector:

 .container #footer .sixteen .columns span 

selecciona un elemento , dentro de un elemento de clase 'columns' , dentro de un elemento de la clase 'sixteen' , dentro de un elemento de id="footer" sí dentro de un elemento de la clase 'container' ; dando HTML:

Lo cual no se parece a tu propio HTML. Como el espacio en blanco establece una relación ancestro-descendiente, el corolario es que ningún espacio en blanco implica el mismo elemento, que es lo que pretendías, creo. Omitir el espacio en blanco, entonces, da el siguiente selector:

 #footer.container .sixteen.columns span { /* CSS here */ } 

Este selector es, probablemente, demasiado complejo (dado que un id identifica de forma única un elemento ¹ ), y podría volverse a escribir simplemente:

 #footer .sixteen.columns span { /* CSS here */ } 

O incluso, si está dispuesto y es capaz de sacrificar alguna especificidad:

 #footer span { /* CSS here */ } 

1. Tenga en cuenta que a menudo se usa un nombre de clase en JavaScript para denotar un estado, cambio de estado o interacción de algún tipo; por lo tanto, no es definitivamente redundante combinar una id con una class ( #footer.container ), pero si la clase no se agrega o elimina dinámicamente, probablemente sea redundante e innecesaria. Como con todas las cosas en el desarrollo web, vale la pena experimentar para descubrir qué funciona para usted; los navegadores contemporáneos son lo suficientemente rápidos en su mayor parte, que agregar un nombre de clase al selector no reducirá sustancialmente las cosas, pero tenga cuidado con los casos de uso de tiempo crítico, cuando lo mejor es eliminar todo lo que no sea absolutamente necesario.

Referencias

• Selectores de CSS (y combinadores) .

con:

 #footer > .sixteen.columns > span 

Su selector no funciona porque tiene espacios entre los selectores que se refieren al mismo elemento.

por ejemplo, .container #footer

Pero el espacio dice: “encuentra un elemento con el footer id que desciende de un elemento con una clase que es container “. Pero quiere decir: “encuentre un elemento que tenga el container clases Y el footer id”, lo cual puede hacer concatendolos sin espacio:

por ejemplo, .container#footer

Ver: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

Reorganiza tu selector como este

 #footer.container .sixteen.columns span { font-weight: bold; } 

 
 
 some text here 
  

 #footer span { font-weight: bold; }