html - CSS「#id要素」は孫も選択しますか?

Question

テーブルを<div id="container">含むさまざまな要素が内部にあるとします。CSS セレクターは#container table、div 内のすべてのテーブル (孫、ひ孫などを含む) を選択しますか? それとも、子供だけを選択しますか?

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

Answer 1

はい; 簡単に言えば、ネストレベルに関係なく、table内のすべての要素を選択します。#container

このスペースは、子孫コンビネータと呼ばれます。缶に書かれているとおり、すべての子孫を選択します。これには、入れ子のレベルに関係なく、子、孫などが含まれます。子供を選択するだけではありません。その目的は、子コンビネータ>によって提供されます。¹

コンテナ内の最初の子を として選択するにはdiv、次を使用します

#container > div:first-child

または、最初の子として何か他のものがあり、タイプの最初の子を選択したい場合はdiv、次を使用します

#container > div:first-of-type

---

¹ _{この目的のために、「直系の子」のみを選択するようによく言われます。「子」と言う場合は、代わりに「子孫」を意味することがよくあります。ただし、厳密に言えば、「子」とは直接の入れ子レベルを指します。「間接の子」なんてものはありません。}

Answer 2

#container tableDOMツリーの深さに関係なく、要素内にあるすべてのtable要素を選択します。#container第1レベルの要素のみをターゲットにする場合は、次のように使用します。#container > table

コンテナ要素内の最初の子divを選択するには、次のようにします。-#container > div:first-childこれにより、最初のレベルの子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

Answer 3

#container table

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

#container > table

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

Answer 4

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

#container > div{}