🗂

動的に生成されるolの数が1つなら、CSSで番号を表示しないようにする

2022/07/20に公開約1,200字

0.やりたいこと

  1. 動的に生成されるolが1つの時に1.テストではなくテストと表示したい。

  2. リストの前の数字が(1)テスト(2)テストとなるように表示したい。

  3. これら全てをCSSで実装したい。

1.olの数が1つの時に番号を表示しないようにする

これはCSSの擬似要素の:only-of-typeを使うことで実装できる。
:only-of-typeは同じ型の兄弟要素がない時にそのCSSが適用される。

html
<ol>
	<li>test1</li>
</ol>
css
ol li:only-of-type {
	list-style-type :none;
}

このように書くと、liが1つしかないときにlist-style-type :none;が適用されて、リストの番号を消すことが出来る。

result
test1

2.olのリストを修飾する

リストを修飾するにはcontentcounterを使用する。

html
<ol>
	<li>test1</li>
	<li>test2</li>
</ol>
css
ol{
  list-style-type: none;
   counter-reset: cnt;
}
li::before {
  counter-increment: cnt;
  content: '('counter(cnt)')';
}
result
(1)test1
(2)test2

これでolの修飾は完成する。
しかし、contentを使った修飾を行う場合、list-style-typeが適用されないので、1の方法を変える必要がある。
この問題は擬似要素の:not()を使うことで解決する。

html
<ol>
	<li>test1</li>
</ol>
css
ol{
  list-style-type: none;
   counter-reset: cnt;
}
li::before:not(:only-of-type) {
  counter-increment: cnt;
  content: '('counter(cnt)')';
}
result
test1

擬似要素:not()を使うことにより、要素が1つではない場合にCSSを適用するように設定することによって、今回の要件を満たすことが出来た。

まとめ

CSSの擬似要素を使うと、JSなどを使わずに色々な装飾を条件に分けて使いこなせるのですごい。

Discussion

ログインするとコメントできます