CSS3 `:first-of-type` セレクターはクラス名をどのように処理しますか?

クラス名を指定した CSS3 セレクター :first-of-type の使用

CSS3 セレクター :first-of はよくある誤解です。 -type をクラス名と組み合わせて使用​​すると、その特定のクラスの最初の要素を選択できます。しかし、これは当てはまりません。

:first-of-type 擬似クラスは、兄弟の中でその型の最初の要素をターゲットとします。したがって、:first-of-type を指定したクラス セレクターを使用すると、そのクラスの最初の要素であり、その型の最初の要素でもある要素が選択されます。

説明すると、

p:first-of-type { color: blue; }

このルールは親要素の最初の段落が青になります。

p.myclass1:first-of-type { color: red; }

このルールは、クラス "myclass1" の最初の段落を返します。 red.

ただし、クラス「myclass1」を持つ段落が複数ある場合、指定されたクラスを持つそのタイプの最初の段落が対象となるため、最初の段落のみがこのルールの影響を受けます。

クラスのタイプに関係なく、クラスの最初の出現を選択するために使用できる直接 CSS3 セレクターはありません。代わりに、複数のセレクターとカスケードを伴う回避策を採用できます。

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

この解決策は、要素の初期色を「myclass1」クラスで設定することで機能します。その後、後続のルールは、最初の要素の兄弟である同じクラスを持つ他の要素の色をオーバーライドします。

本質的に、:first-of-type は、その型の最初の要素をターゲットにするのではなく、その型の最初の要素をターゲットにすることに注意してください。特定のクラスの最初の要素は、CSS3 セレクターで使用する場合に重要です。

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