CSSで条件分岐。<li>が1つしかない<ul>にだけ適用する。

サイトオープン時に記事が1つしかなくて生じた表示のずれをCSSで整えたかった場合に使った。納品後に作業しなくてよいように。

一つ目の:has(li:first-child)で一つ以上<li>を持つかを判断しています。

二つ目の:not(:has(li:first-child + li))で、2個目の<li>が無いことを判断しています。

<li>が1個以上あるけれど、2個以上はないので、1個、になります。

ul:has(li:first-child):not(:has(li:first-child + li)){
    background-color: red;
  }

例えば以下のような場合に、

が1つしかない

<ul>
<li>1個しかない場合は背景色が赤色</li>
</ul>
<ul>
<li>2個あるから背景色が変化なし</li>
<li>2個あるから背景色が変化なし</li>
</ul>

note for coding