:first-of-type
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
試してみましょう
dt {
font-weight: bold;
}
dd {
margin: 3px;
}
dd:first-of-type {
border: 2px solid orange;
}
<dl>
<dt>野菜:</dt>
<dd>1. トマト</dd>
<dd>2. キュウリ</dd>
<dd>3. キノコ</dd>
<dt>果物:</dt>
<dd>4. リンゴ</dd>
<dd>5. マンゴー</dd>
<dd>6. ナシ</dd>
<dd>7. オレンジ</dd>
</dl>
構文
css
:first-of-type {
/* ... */
}
例
最初の段落の整形
HTML
html
<h2>見出し</h2>
<p>段落 1</p>
<p>段落 2</p>
CSS
css
p:first-of-type {
color: red;
font-style: italic;
}
結果
入れ子になった要素
この例は、入れ子になった要素を対象に含める方法を示します。なお、要素型セレクターが書かれていない場合は、全称セレクター (*) が暗黙に含まれます。
HTML
html
<article>
<div>これは最初の `div` です。</div>
<div>これは<span>内側で最初の `span`</span> です。</div>
<div>
これは<em>内側で最初の `em`</em>で、一方これは<em>最後の `em` </em>です。
</div>
<div>これは<span>スタイル付けされた内側の `span`</span>です</div>
<p>これは `p` で修飾しています。</p>
<div>これは最後の `div` です。</div>
</article>
CSS
css
article :first-of-type {
background-color: pink;
}
結果
仕様書
| Specification |
|---|
| Selectors Level 4 # first-of-type-pseudo |
ブラウザーの互換性
Loading…