もっと詳しく 
メモ

HTML
<ul>
  <li class="item"></li>
</ul>
<ul>
  <li class="item"></li>
  <li class="item"></li>
</ul>
<ul>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

CSS
/* 1個の場合 */
.item:only-child {
  color: #a00;
}
/* 2個の場合 */
.item:first-child:nth-last-child(2),
.item:first-child:nth-last-child(2) ~ .item {
  color: #0a0;
}
/* 3個の場合 */
.item:first-child:nth-last-child(3),
.item:first-child:nth-last-child(3) ~ .item {
  color: #00a;
}

The post 子要素の数でスタイルを変えるcss first appeared on haikararou.