:first-of-type セレクターを使用して、特定のクラスの最初の要素を選択できますか?

:first-of-type セレクターとクラス選択

CSS3 の :first-of-type セレクターは、最初のクラスを選択するように設計されています。兄弟の中で特定のタイプ (p、div など) の要素。ただし、クラス名と組み合わせて使用​​しようとすると、よくある誤解が生じます。

質問:

:first-of-type を利用することは可能ですか?特定のクラスの最初の要素を選択するセレクターname?

答え:

残念ながら、単一のセレクターを使用してこれを実現することはできません。 :first-of-type 擬似クラスは、クラス名ではなく要素の型に対して動作します。クラス セレクターを使用すると、指定されたクラスを持ち、兄弟グループ内の最初の型である要素を選択することになります。

回避策:

CSS によって提供される :first-of-class セレクターがありません。回避策を使用して、最初に出現したクラスをターゲットにすることができます。 class:

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default or inherited */; }

ここで、最初のクラス宣言は、「myclass1」クラスのすべての要素の色を赤に設定します。後続の宣言は、同じクラスの別の要素の直前にある「myclass1」クラスの要素をターゲットとします。この後者の宣言は、クラスの最初の出現を除くすべての色をデフォルト値または継承された値にリセットします。

この回避策の詳細な説明と図は、以下にあります。記事:

• https://css-tricks.com/the-problem-with-first-child-selector/
• https://www.quirksmode.org/css /contents.html#first-of-type-sibling

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