:first-of-type は特定のクラス名の最初の要素を選択できますか?

クラス名で :first-of-type セレクターを使用する

質問:

はできますCSS3 セレクター :first-of-type は、特定のクラスを持つ最初の要素を選択するために使用されます。 name?

答え:

いいえ、:first-of-type を単独で使用して、特定のクラスの最初の要素を選択することはできません。

説明:

:first-of-type pseudo-class は、その兄弟の中でその型の最初の要素をターゲットとします。この疑似クラスにクラス セレクターまたは型セレクターを追加すると、選択は、指定されたクラス名を持つ特定の型 (div や p など) 内の要素に制限される必要があることを示します。ただし、CSS は、クラスの最初の出現のみを選択する専用の :first-of-class セレクターを提供しません。

回避策:

回避策として、この機能は、クラス名とセレクターの特異性の組み合わせを使用して実現できます:

1. クラス名の割り当て(例: .myclass1) を、一意のスタイルを適用する最初の要素に追加します。
2. 同じクラス名を持つ後続のセレクターと兄弟セレクター (~) を使用して、最初の要素の後に適用されたスタイルをリセットします。 .

例:

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

これにより、最初の要素のみがクラスを持つことが保証されます。 .myclass1 は指定されたスタイルを受け取り、後続の要素はデフォルトまたは親のスタイルを継承します。

追加メモ:

• nth- などのその他の CSS テクニックchild() または :last-of-type() セレクターは、より複雑な選択ニーズに使用できます。
• JavaScript の使用または、プリプロセッサは、クラス名に基づいて特定の要素を選択するための追加の柔軟性を提供する場合があります。

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