.container *:first-child と .container > *:first-child の違いは？

html
1<body>
2
3<style>
4.container *:first-child { color: blue; }
5.container > *:first-child { color: red; }
6</style>
7
8<div class="container">
9  <p>paragraph 1</p>
10  <p>paragraph 2</p>
11  <p>paragraph 3</p>
12
13  <ul>
14    <li>list-item 1</li>
15    <li>list-item 2</li>
16    <li>list-item 3</li>
17  </ul>
18
19  <table>
20    <tr>
21      <th>Fruits</th>
22      <th>Vegetables</th>
23    </tr>
24    <tr>
25      <td>Apple</td>
26      <td>Potato</td>
27    </tr>
28    <tr>
29      <td>Orange</td>
30      <td>Carrot</td>
31    </tr>
32  </table>
33
34</div>
35</body>

▼ 実行結果
![]

.container > *:first-child { color: red; } では一番上の paragrah 1 のみがマッチします。これは「.container 直下のすべての要素のうち、一番最初の要素」だと理解しています。

ただ、.container *:first-child { color: blue; } で画像のようにマッチする理由がわかりません。僕の予想では「.container 内の（子孫含む）すべての要素のうち、一番最初の要素」にマッチする、つまり .container > *:first-child { color: red; } で赤くなっているのと同じ部分だけがマッチするのだと思ったのですが。

質問

.container *:first-child はどのようなマッチの挙動になっているのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

「.container 内の（子孫含む）すべての要素のうち、一番最初の要素」

「.container 内の（子孫含む）すべての要素のうち、（兄弟要素の中で）一番最初の要素」です。

投稿2020/06/25 12:30

kei344

総合スコア69458

退会済みユーザー

2020/06/25 12:50 編集

ありがとうございます！ということは、「<p> * 3, <ul>, <table> の兄弟で最初 → paragraph 1」「<li> 3兄弟の中で最初 → list-item 1」ですね。 <table> の中身がすべてマッチするのはなぜでしょうか？「<tr>3兄弟の最初、かつ<th>の最初」で Fruits のみマッチするのでは？とおもったのですが。 ※訂正追記「<tr>3兄弟それぞれの中身の最初」で Fruits, Apple, Orange, のみマッチするのではと思いました。