CSS3セレクター：クラス名を持つ最初のタイプ？

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 */; }

回避策の説明と図は、こことここにあります。

ドラフトCSSセレクターレベル4はof <other-selector>、:nth-childセレクター内に文法を追加することを提案しています。これにより、特定の他のセレクターに一致するn番目の子を選択できます。

:nth-child(1 of p.myclass) 

以前のドラフトでは新しい疑似クラスが使用されていた:nth-match()ため、機能のいくつかの説明でその構文を確認できます。

:nth-match(1 of p.myclass)

これは現在WebKitに実装されているため、Safariでも使用できますが、これはそれをサポートする唯一のブラウザのようです。Blink（Chrome）、Gecko（Firefox）、それをEdgeに実装するためのリクエストを実装するためのチケットが提出されていますが、これらのいずれについても明確な進展はありません。

これは、CSS3セレクター：first-of-typeを使用して、特定のクラス名を持つ最初の要素を選択することはできません。

ただし、ターゲット要素に以前の要素の兄弟がある場合は、否定CSS疑似クラスと隣接する兄弟セレクターを組み合わせて、同じクラス名を持つ直前の要素をすぐに持たない要素に一致させることができます。

:not(.myclass1) + .myclass1

完全に機能するコード例：

p:first-of-type {color:blue}
p:not(.myclass1) + .myclass1 { color: red }
p:not(.myclass2) + .myclass2 { 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>

あなたの参照のための解決策を見つけました。一部のグループdivから、2つの同じクラスdivのグループから最初のdivを選択します

p[class*="myclass"]:not(:last-of-type) {color:red}
p[class*="myclass"]:last-of-type {color:green}

ところで、なぜ:last-of-type機能するのかはわかりませんが、機能:first-of-typeしません。

jsfiddleの私の実験... https://jsfiddle.net/aspanoz/m1sg4496/

これは古いスレッドですが、検索結果のリストでまだ上位に表示されているので、返答しています。未来が到来したので、：nth-​​child疑似セレクターを使用できます。

p:nth-child(1) { color: blue; }
p.myclass1:nth-child(1) { color: red; }
p.myclass2:nth-child(1) { color: green; }

：nth-​​child疑似セレクターは強力です-括弧は数式だけでなく数値も受け入れます。

詳細：https : //developer.mozilla.org/en-US/docs/Web/CSS/ : nth-child

フォールバックソリューションとして、次のようにクラスを親要素でラップできます。

<div>
    <div>This text should appear as normal</div>
    <p>This text should be blue.</p>
    <div>
        <!-- first-child / first-of-type starts from here -->
        <p class="myclass1">This text should appear red.</p>
        <p class="myclass2">This text should appear green.</p>
    </div>
</div>

これを説明する方法はわかりませんが、今日は似たようなことに遭遇しました。設定することができない.user:first-of-type{}間、.user:last-of-type{}正常に動作している。クラスやスタイルなしでdiv内にそれらをラップした後、これは修正されました：

https://codepen.io/adrianTNT/pen/WgEpbE

<style>
.user{
  display:block;
  background-color:#FFCC00;
}

.user:first-of-type{
  background-color:#FF0000;
}
</style>

<p>Not working while this P additional tag exists</p>

<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>

<p>Working while inside a div:</p>

<div>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
</div>

これを行うには、同じクラスの兄弟であるクラスのすべての要素を選択して反転します。これにより、ページ上のほとんどすべての要素が選択されるため、クラスで再度選択する必要があります。

例えば：

<style>
    :not(.bar ~ .bar).bar {
        color: red;
    }
<div>
    <div class="foo"></div>
    <div class="bar"></div> <!-- Only this will be selected -->
    <div class="foo"></div>
    <div class="bar"></div>
    <div class="foo"></div>
    <div class="bar"></div>
</div>

単に:first私にとってはうまくいきますが、なぜこれがまだ言及されていないのですか？