子要素が一つのみの場合に適用される「: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>要素だけは一つしかない場合に適用されます。

AWSを利用した導入事例のご紹介

実際に構築を行ったAWSの事例を紹介しています。導入の目的に近い事例をご覧いただくと、実際の構成例やメリット、注意点などが把握できます。

ブックオフコーポレーション株式会社様
第一生命保険株式会社様
株式会社電通様
株式会社LIFULL様
株式会社リブセンス様
TBSアナウンス部様
明治大学様
拓殖大学様