:only-of-type疑似クラス (E:only-of-type)
CSS3で定義された:only-of-type疑似クラスは、ある要素内の指定した要素が唯一の場合にスタイルが適用されます。
ちなみに、:first-of-type:last-of-type
と書くのと同じですが、:only-of-type
の方が個別性が低くなります。
- 対応ブラウザ
-
:only-of-type疑似クラスのサンプル
.item {
margin-bottom: 15px;
padding: 10px;
border: 1px solid #999;
}
.item p:only-of-type {
color: red;
}
dl {
margin-bottom: 20px;
}
dl dt:only-of-type {
background: #ddf5da;
}
<div class="item">
<p>テキスト</p>
<p>てきすと</p>
</div>
<div class="item">
<p>テキスト</p>
</div>
<div class="item">
<h4>小見出し</h4>
<p>てきすと</p>
</div>
<dl>
<dt>dt text</dt>
<dd>dd text</dd>
</dl>
<dl>
<dt>dt text</dt>
<dd>dd text</dd>
<dt>dt text</dt>
<dd>dd text</dd>
</dl>
<dl>
<dt>dt text</dt>
</dl>
この指定により、div class="item"
内でp要素が唯一の場合に適用されます。なので、p要素以外やdt要素以外がいくつ出てきても適用されます。
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
テキスト
てきすと
テキスト
小見出し
てきすと
- dt text
- dd text
- dt text
- dd text
- dt text
- dd text
- dt text