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

:only-of-type疑似クラス (E:only-of-type)

  • 最終更新:2009年7月 5日 16:17

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

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

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

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

このページの上部へ