¿Un CSS "elemento #id" también selecciona nietos?

Question

Supongo que tengo un <div id="container"> con varios elementos dentro, incluidas las tablas. ¿El selector CSS #container table selecciona todas las tablas dentro del div (incluyendo nietos, bisnietos, etc.)? ¿O selecciona solo niños?

Además, si quiero seleccionar el primer div hijo dentro del contenedor div, ¿cómo lo haría?

Answer 1

Sí; para decirlo simplemente, que selecciona todos los elementos table dentro de #container, independientemente del nivel de anidación.

El espacio se llama descendant combinator. Como es exactamente lo que dice en la lata, selecciona cualquier descendiente. Eso incluye a los niños, nietos, etc., de nuevo, independientemente del nivel de anidación. No solo selecciona niños; ese propósito es servido por el child combinator >.

Para seleccionar el primer hijo dentro de su recipiente como una div, utiliza

#container > div:first-child 

O si usted tiene algo más que el primer hijo y desea recoger el primer hijo que es de tipo div, utiliza

#container > div:first-of-type 

---

_{Para este propósito, a menudo se dice que selecciona solo "niños directos", y donde la gente dice "niños" a menudo significan "descendientes". Estrictamente hablando, sin embargo, "niños" se refiere al nivel inmediato de anidación. No hay tal cosa como un "niño indirecto".}

Answer 2

#container table 

selecciona todos los descendientes que son tabla.

#container > table 

selecciona todos los niños que son de mesa.

Answer 3

Además, si quiero seleccionar el primer div hijo dentro del contenedor div, ¿cómo podría hacerlo?

#container > div{} 

Answer 4

#container table seleccionará todos los table elementos que se encuentran dentro del elemento #container, no importa qué tan profundo en el árbol DOM que son. Si desea dirigirse sólo los primeros elementos de nivel, que iría sobre el uso de este: #container > table

para seleccionar la primera div niño dentro del elemento contenedor, que haría lo siguiente: #container > div:first-child - esto va a seleccionar sólo la primer nivel div hijo O bien, si desea orientar todos los primeros elementos div dentro del contenedor, que tendría que utilizar #container div:first-child

Esto sólo es válido si el div es en realidad el primer hijo de ese elemento

<div id="container"> 
    <div>some content</div> 
</div> 

así, por ejemplo, no debe haber ninguna etiqueta p antes (o ninguna otra).

<div id="container"> 
    <p>Some text</p> 
    <div>some content</div> 
</div> 

Si el div no es el primer hijo, que había necesidad de hacer lo siguiente: #container div:first-of-type