[解決済み】CSS3 セレクタ :first-of-type をクラス名で指定する？

質問

CSS3 のセレクタを使用することは可能ですか？ :first-of-type は、指定されたクラス名を持つ最初の要素を選択するために使用されますか？私のテストでは成功していないので、そうではないと思っているのですが？

コード( http://jsfiddle.net/YWY4L/ ):

p:first-of-type {color:blue}
p.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}

<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>

解決方法は？

いいえ、1つのセレクタだけでは不可能です。その :first-of-type 擬似クラスの最初の要素を選択します。 タイプ ( div , p など）。その擬似クラスでクラスセレクタ（またはタイプセレクタ）を使用すると、与えられたクラスを持つ（または与えられたタイプの）要素が選択されることを意味します。 と は、その兄弟の中でその型の最初のものである。

残念ながら、CSSでは :first-of-class セレクタは、あるクラスが最初に出現する場所のみを選択します。回避策として、以下のようなものを使うことができます。

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }

回避方法の説明とイラストを掲載します。 こちら と こちら .