擬似クラス「first-child」がクラス名に指定できないことを示すソース

Question

:first-childはクラス名に対して指定はできませんが、そのことについて公式の仕様書等に書いていないのでしょうか？
自分なりに探してみたのですがなかなか見つかりません。もし知っている方がいましたら教えてください。

<p>aaaaa</p>
<p>bbbbb</p>
<p>ccccc</p>

<p class="example">aaaaa</p>
<p class="example">bbbbb</p>
<p class="example">ccccc</p>

p:first-child {
  color: red;
}
.example:first-child {
  color: red;
}

ーーー追加ーーー
nth-of-typeの話になるのですが、下のコードでクラス名sampleのpタグの2行目の文字色が青色にならないのはなぜですか？
クラス名をつけていないpタグを消したり、クラス名sampleのpタグに新たに親要素を加えたりすると青色になりますよね

<div>aaaaa</div>
<div>bbbbb</div>
<div>ccccc</div>

<p>aaaaa</p>
<p>bbbbb</p>
<p>ccccc</p>

<p class="example">aaaaa</p>
<p class="example">bbbbb</p>
<p class="example">ccccc</p>

<span class="example">aaaaa</span>
<span class="example">bbbbb</span>
<span class="example">ccccc</span>

p:nth-of-type(2) {
  color: red
}

.example:nth-of-type(2) {
  color: blue;
}

Comments

[m.ts10806]

見つけてどうしたいのでしょうか。

[ryoo_chksl]

擬似クラスの中には、クラス名に指定できるものもありますよね。例えば「:hover」など。
それらとの違いが知りたいです。

Answer 1

指定できます。なお、:first-childは親要素の最初にある、という条件です（「セレクタで選ばれた兄弟要素の中で最初にある」という意味のセレクタは:first-of-typeです）。

<div class="test">
  <span class="foo">first</span> <!-- これだけ赤色になる -->
  <span class="foo">second</span>
  <span class="foo">third</span>
</div>

.foo:first-child{
  color:red;
}

CodePenで動作させたもの

Comments

[ryoo_chksl]

「p:first-child」のときは「親要素の最初のタグがpタグのとき」、「.foo:first-child」のときは「親要素の最初のタグに.fooがついているとき」という解釈でいいのでしょうか？

[maisumakun]

そのとおりです。

Answer 2

というか、効きますよ？

<style>
.example:first-child {
  color: red;
}    
</style>
<p class="example">aaaaa</p>
<p class="example">bbbbb</p>
<p class="example">ccccc</p>

提示のコードはp:first-childが効いてるだけのように思いますが。

---

• :first-child

:first-child 疑似クラスは、兄弟要素のグループの中で最初の要素を表します。

つまり、同じグループ内である限り一番最初の要素になるわけですね。

ちなみに最初のCSSでも下記のように、親要素をきちんと囲ってグルーピングしてあげれば想定通りに動きます。

<div>
    <p>aaaaa</p>
    <p>bbbbb</p>
    <p>ccccc</p>
</div>
<div>
    <p class="example">aaaaa</p>
    <p class="example">bbbbb</p>
    <p class="example">ccccc</p>
</div>

Comments

[ryoo_chksl]

質問文に載せたHTMLコードの、クラス名が付いていないpタグ3行をコメントアウトにするとききますね。今発見しました。
しかし、その3行がコメントアウトされていないときかないようです。なぜなんでしょうか？

[m.ts10806]

maisumakunさんの回答にある通りです。
この.exampleがついているpも含めて親要素は何かあればそれが親ですし何もなければbodyとかになりますので。
「.exampleの最初の子」という意味にはなりません。

https://developer.mozilla.org/ja/docs/Web/CSS/:first-child
> 兄弟要素のグループの中で最初の要素を表します。

同階層にあればpでもspanでも何でも兄弟要素です。

[maisumakun]

自分の方の回答に書きましたが、:first-childは、「親要素の最初にある子要素」という意味です。「.example:first-child」であれば、最初の子要素「かつ」exampleクラスのあるもの、という意味になります。