:first-of-type
:first-of-type は CSS の擬似クラスで、兄弟要素のグループの中でその種類の最初の要素を表します。
/* 兄弟要素の中で最初の <p> 要素をすべて選択 */
p:first-of-type {
color: red;
}
Note: 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。
構文
:first-of-type
例
最初の段落の整形
HTML
<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
CSS
p:first-of-type {
color: red;
font-style: italic;
}
結果
入れ子になった要素
この例は、どうやった入れ子になった要素を対象にするかを示します。なお、単純セレクターが書かれていない場合は、ユニバーサルセレクター (*) が暗黙に含まれています。
HTML
<article>
<div>This `div` is first!</div>
<div>This <span>nested `span` is first</span>!</div>
<div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
<div>This <span>nested `span` gets styled</span>!</div>
<b>This `b` qualifies!</b>
<div>This is the final `div`.</div>
</article>
CSS
article :first-of-type {
background-color: pink;
}
結果
仕様書
| Specification |
|---|
| Selectors Level 4 # first-of-type-pseudo |
ブラウザーの互換性
BCD tables only load in the browser