クラス名と擬似クラスを同時に指定は出来ないでしょうか

Question

表題の通りです。
同じクラス名の中で擬似クラスを指定した所、
思った通りの挙動にならなかったため下記のようにテストをしました。

■ベース

<p class="aaa">1番目</p>
<p class="aaa">2番目</p>
<p class="aaa">3番目</p>

p:first-of-type{ color:red; }		→ 1番目が赤
p.aaa:first-of-type{ color:red; }	→ 1番目が赤

■ベースの上にイレギュラーな要素を追加

<p>イレギュラー(追加)</p>
<p class="aaa">1番目</p>
<p class="aaa">2番目</p>
<p class="aaa">3番目</p>

p:first-of-type{ color:red; }		→ イレギュラーが赤
p.aaa:first-of-type{ color:red; }	→ 赤になるものは無し

※p.aaa:first-of-type を下記2点に変えてみても結果は同じでした。
　・p.aaa:nth-of-type(1){ color:red; }
　・p[class="aaa"]:first-of-type{ color:red; }

■結果と実現したいこと

理想 → class名[aaa]の中の1番目が赤くなる
実際 → class名[aaa]、なおかつ 要素の1番目じゃないと赤くならない

class名が無視されているのかと思いきや、
イレギュラーが入った方でclass名と疑似クラスを両方指定した場合は赤くなるのが無い状態です。

実務でイレギュラーのように同じ要素(違うclass名)が一番上に追加されることがあるため困っているのですが、
理想の「class名aaaの中の1番目が赤くなる」という挙動をcssのみで制御するのは無理なのでしょうか？

ご教示の程よろしくお願いいたします。

Answer 1

はい、:first-of-typeのtypeはタイプセレクタ（HTMLではpなどの要素セレクタ）を意味しています（CSS4）。「特定のクラスを満たす最初の要素」に使うことはできません。

Comments

[maisumakun]

いちおう、「:nth-child(1 of .aaa)」という書き方は存在しますが、現状ではSafariしか対応していないようです。

https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child

[sor]

やはり特定のclass内で、という判定は出来ないのですね。。
現状では使うのが難しそうですがorの書き方があるのは初めて知りました！
イレギュラーが発生しても問題無いようcssを組みなおしたいと思います。
ご回答ありがとうございました！

Answer 2

単純に「p.aaa:first-of-type」は
「兄弟要素のグループの中でその種類の最初の要素」のウチ「クラスaaaを持つもの」という
解釈をされます

Comments

[sor]

解釈の順番が逆だったのですね。。
逆に言うと最初の要素のclass名によってcssを分ける事は出来そうなので、
どうにかcssを組みなおしたいと思います。
ご回答ありがとうございました！