Un elemento "#id" del CSS seleziona anche i nipoti?

Question

Dire che ho uno <div id="container"> con vari elementi al suo interno, incluse le tabelle. Il selettore CSS #container table seleziona tutte le tabelle all'interno del div (compresi i nipoti, i pronipoti, ecc.)? O seleziona solo i bambini?

Inoltre, se voglio selezionare il primo div figlio all'interno del contenitore div, come dovrei farlo?

Answer 1

Sì; per dirla in modo semplice, seleziona tutti gli elementi table all'interno di #container, indipendentemente dal livello di annidamento.

Lo spazio è chiamato descendant combinator. Come esattamente quello che dice sulla latta, seleziona qualsiasi discendente. Ciò include bambini, nipoti, ecc., Sempre a prescindere dal livello di nidificazione. Non seleziona solo i bambini; questo scopo è servito dallo child combinator >.

Per selezionare il primo figlio all'interno del vostro contenitore come div, si utilizza

#container > div:first-child 

O se avete qualcosa di diverso come il primo figlio e si vuole prendere il primo figlio che è di tipo div, si utilizza

#container > div:first-of-type 

---

_{A tal fine, si dice spesso che selezioni solo "bambini diretti", e dove la gente dice "bambini" spesso intenda "discendenti". A rigor di termini, però, "bambini" si riferisce al livello di nidificazione immediato. Non esiste un "bambino indiretto".}

Answer 2

#container table 

seleziona tutti i discendenti che sono tabella.

#container > table 

seleziona tutti i bambini che sono tabella.

Answer 3

Inoltre, se desidero selezionare il primo div figlio all'interno del contenitore div, come farei?

#container > div{} 

Answer 4

#container table selezionerà tutti gli table elementi che si trovano all'interno dell'elemento #container, non importa quanto in profondità nella struttura DOM sono. Se si vuole indirizzare solo i primi elementi di livello, devi andare sull'utilizzo di questo: #container > table

per selezionare la prima div bambino all'interno dell'elemento contenitore, devi effettuare le seguenti operazioni: #container > div:first-child - questo sarà selezionare solo il bambino di primo livello div. O, se si desidera raggiungere tutti i primi elementi div all'interno del contenitore, utilizza #container div:first-child

Questo è valido solo se il div è in realtà il primo figlio di quell'elemento

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

così, ad esempio, non ci deve essere alcun tag p prima di esso (o qualsiasi altro).

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

Se il div non è il primo figlio, avresti bisogno di fare quanto segue: #container div:first-of-type