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

0.やりたいこと

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

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

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

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

これは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のリストを修飾する

リストを修飾するにはcontentとcounterを使用する。

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などを使わずに色々な装飾を条件に分けて使いこなせるのですごい。