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