CSSで何度も出てくるセレクタをまとめる方法

実現したいこと。

次のようなCSSがあるとします。

css
1(以上略)
2
3.kako ol {list-style: none; margin: 0; padding-left: 2.25em;}
4.kako ol > li {position:relative;}
5.kako ol > li:before {position: absolute; left: -1.25em;}
6.kako ol > li:nth-child(1):before {content: "①";}
7.kako ol > li:nth-child(2):before {content: "②";}
8.kako ol > li:nth-child(3):before {content: "③";}
9
10.kako ul {list-style: none; margin: 0; padding-left: 3em;}
11.kako ul > li {position:relative;}
12.kako ul > li:before {position: absolute; left: -2em;}
13.kako ul > li:nth-child(1):before {content: "(1)";}
14.kako ul > li:nth-child(2):before {content: "(2)";}
15.kako ul > li:nth-child(3):before {content: "(3)";}
16
17.kako span.ol {text-decoration: overline;}
18
19(以下略)

上に示した部分では，｢kakoクラスの子孫要素｣という条件が共通しています。

この条件を何度も書かなくていいようにする方法はないかと思ったのですが，
何かご存知の方はいらっしゃいませんでしょうか。

例えばこんなイメージです。

これでは動作する筈がありませんが・・・。

css
1.kako * {
2    ol {list-style: none; margin: 0; padding-left: 2.25em;}
3    ol > li {position:relative;}
4    ol > li:before {position: absolute; left: -1.25em;}
5    ol > li:nth-child(1):before {content: "①";}
6    ol > li:nth-child(2):before {content: "②";}
7    ol > li:nth-child(3):before {content: "③";}
8
9    ul {list-style: none; margin: 0; padding-left: 3em;}
10    ul > li {position:relative;}
11    ul > li:before {position: absolute; left: -2em;}
12    ul > li:nth-child(1):before {content: "(1)";}
13    ul > li:nth-child(2):before {content: "(2)";}
14    ul > li:nth-child(3):before {content: "(3)";}
15
16    span.ol {text-decoration: overline;}
17}

よろしくお願いします。

Lhankor_Mhy

2019/02/02 07:50

グループ化の方法ではないのでここに書きますが、このようなHTML構造に頼った書き方は詳細度が異なってしまうので、個人的には避けたいです。あとで痛い目を見るのがイヤなので。

行動規範の内容に同意します

回答3件

記述時の話でしたらSass(SCSS）という手もあります。
※コンパイル環境構築必須

投稿2019/02/01 23:21

編集2019/02/02 07:26

m.ts10806

総合スコア80850

退会済みユーザー

2019/02/02 07:24

リンクのところがうまく反映されていないかもしれません。

m.ts10806

2019/02/02 07:26

ご指摘ありがとうございます。何個か探してて二重に貼ってしまってました…

退会済みユーザー

2019/02/02 07:28

いえいえ修正していただきありがとうございます。

行動規範の内容に同意します

:is()

Selectors Level 4に :is() がありますが、ブラウザの実装状況に難があります。

グループ化ではない

しかし、それ以前の問題として、

CSS
1.kako ol {list-style: none; margin: 0; padding-left: 2.25em;}
2.kako ol > li {position:relative;}
3.kako ol > li:before {position: absolute; left: -1.25em;}
4.kako ol > li:nth-child(1):before {content: "①";}
5.kako ol > li:nth-child(2):before {content: "②";}
6.kako ol > li:nth-child(3):before {content: "③";}
7
8.kako ul {list-style: none; margin: 0; padding-left: 3em;}
9.kako ul > li {position:relative;}
10.kako ul > li:before {position: absolute; left: -2em;}
11.kako ul > li:nth-child(1):before {content: "(1)";}
12.kako ul > li:nth-child(2):before {content: "(2)";}
13.kako ul > li:nth-child(3):before {content: "(3)";}