子要素が一つのみの場合に適用される「:only-child」と「:only-of-type」セレクタの違い

harada 176views 更新:2015年2月19日

使ったことのないCSS3セレクタについて調べてみるシリーズです。

「:only-child」セレクタと「:only-of-type」セレクタはどちらも子要素が一つのみの場合に適用される指定なのですが、
他の子要素も含めるか含めないかで、使い分けをする必要があります。

:only-child

div.box p {
  font-size:13px;
}
div.box p:only-child {
  font-size:22px;
}

<div class="box"> の中に、他の要素(<ul><h3>など)がなにもなく、本当に唯一<p>しか配置されていない場合に適用されます。

:only-of-type

div.box p {
  font-size:13px;
}
div.box p:only-of-type {
  font-size:22px;
}

<div class="box"> の中で他の要素(<ul><h3>など)があっても、<p>要素だけは一つしかない場合に適用されます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません