CSS "#id要素"も孫を選択しますか？

Question

私は<div id="container">の中に、テーブルを含めてさまざまな要素があります。 CSSセレクタ#container tableはdiv内のすべてのテーブル（孫、孫など）を選択していますか？それとも子供のみを選んでいるのですか？

また、コンテナdiv内の最初の子divを選択する場合、どうすればよいですか？

Answer 1

はい。簡単に言えば、ネストレベルにかかわらず、すべてtable要素を#containerに選択します。

このスペースはdescendant combinatorと呼ばれます。それがスズについて何を言うのと同じように、それはどんな子孫も選択します。これには、ネストレベルに関係なく、子供、孫なども含まれます。子供を選択するだけではありません。その目的はchild combinator >によって提供されます。 1

^あなたは

#container > div:first-child 

を使用し、divとして、コンテナ内の最初の子を選択したり、あなたは最初の子として何かを持っていて、型である最初の子を選択したい場合div、あなたが使用

#container > div:first-of-type 

---

_{この目的のために、「直接的な子供たち」だけを選択すると言われることが多く、人々が「子供たち」と言う場合は、代わりに「子孫」を意味することがよくあります。しかし、厳密に言えば、「子供」は直ちにネストレベルを指します。 「間接的な子供」のようなものはありません。}

Answer 2

#container table 

は、テーブルであるすべての子孫を選択します。

#container > table 

は、テーブルであるすべての子を選択します。

Answer 3

また、コンテナ div内の最初の子divを選択したい場合はどうすればよいですか？

#container > div{} 

Answer 4

#container tableは関係なく、彼らがどのようにDOMツリー内の深い、#container要素の内部にあるすべてのtableの要素を選択しません。コンテナ要素の中に最初の子のdivを選択するには#container > table

、次の操作を実行したい：あなたが最初のレベル要素をターゲットにする場合は、あなたがこれを使用して行くだろう #container > div:first-child - これはのみ選択されます第1レベルの子div。それとも、あなたは、コンテナ内のすべての最初のdiv要素をターゲットにする場合は、あなたが#container div:first-child

を使用したいこれはdivは、例えば、実際にその要素ので

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

の最初の子である場合にのみ有効です。それ以前にはpというタグがあってはなりません。

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

divが最初の子でない場合は、次の操作を実行する必要があるでしょう：#container div:first-of-type