CSS3 の `:first-of-type` セレクターをクラス名で使用できますか?

クラス名での CSS3 セレクター :first-of-type の使用

CSS3 セレクター :first を利用できるかどうか疑問に思うかもしれません。 -of-type とクラス名を組み合わせます。ただし、このセレクターだけを単独で使用するだけでは十分ではない場合があります。

説明

:first-of-type 疑似クラスは、そのクラス内の特定の型の最初の要素をターゲットとします。兄弟。クラス セレクターと組み合わせると、指定されたクラスを所有し、その兄弟の中でそのタイプの最初の要素である要素をフィルター処理します。

残念ながら、CSS には、次のような :first-of-class セレクターがありません。特定の要素を持つ要素の最初の出現のみを検索します。 class.

回避策

この制限を回避するには、次の手法を使用できます。

.myclass1 {
  color: red;
}

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

説明

この回避策では、一般的な兄弟コンビネータ (~) を使用して、クラスを持つすべての要素を対象とします。 myclass1 の前には同じクラスの別の要素が続きます。これらの後続の要素の色をデフォルトに設定するか、親 div から継承するように設定することで、最初に出現する .myclass1.

Additional Resources

を除くすべての赤色を効果的に抑制します。

この回避策の詳細な説明と視覚的な図解は、次の場所にあります:

• [Mozilla Developerネットワーク](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Adjacent_sibling_selectors)
• [CSS トリック](https://css-tricks.com/almanac/ selectors/c/combinators/#:~:text=~ コンビネータはすべてを選択します、= 30 (クラスは特異性))

以上がCSS3 の `:first-of-type` セレクターをクラス名で使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。