トップページの中の セレクタの中の :only-child疑似クラス (E:only-child)

:only-child疑似クラス (E:only-child)

  • 最終更新:2009年7月 6日 08:56

CSS3で定義された:only-child疑似クラスは、ある要素内で子要素が唯一の場合に指定した要素にスタイルが適用されます。

ちなみに、:first-child:last-childと書くのと同じですが、:only-childの方が個別性が低くなります。

対応ブラウザ
  • IE6未対応
  • IE7未対応
  • IE8未対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

: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
  • CSS HappyLife
  • underHat
著書(全て共著)

このページの上部へ