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

使ったことのない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>要素だけは一つしかない場合に適用されます。