CSSで正規表現を使いたい

Question

WordPressの追加CSSに下記のような

<h1>～<h6>タグを同じブロックで定義したいです。 pattern3-Q のような指定方法はありますでしょうか。

/* pattern1-Q */
h[1-6] {
    font-size: 28px;
}

/* pattern1-A */
h1, h2, h3, h4, h5, h6 {
    font-size: 28px;
}

/* pattern2-Q */
.single-post-wrap > h[1-6]:nth-child(1) {
    font-size: 28px;
}

/* pattern2-R */
.single-post-wrap > h1, h2, h3, h4 h5, h6:nth-child(1) {
    font-size: 28px;
}

/* pattern3-Q */
.single-post-wrap > h[1-6]:nth-child(\d+) {
    font-size: 28px;
}

①pettern1-Qのように記述する方法はないのでしょうか。
ただの<h1>～<h6>なら
pattern1-Aのように記述すれば手間ではないのですが、

②pattern2-Q ように.single-post-wrap の<h1>なら
どうすればいいでしょう(pattern2-Rはダメでした)。

③一番困っているのはpattern3-Q のパターンで
wordpressが勝手に(?)作る数字がchild()の引数(?)になる時です。
このようなときは、どう指定するのが好ましいですか。

④よろしければ、なんとググれば出てきたかも教えていただけませんでしょうか。

CSS 正規表現 でググると、下記のようなものが出てきましたが、
私のしたいような指定方法は見つかりませんでした。
行頭にマッチ：　p[class^="under"] {
行末にマッチ：　p[class*="through"] {
部分一致：　　　p[class$="bold"] {

よろしくお願いします。

Answer 1

いま規格化が進行中のセレクタとして:is()というものがあります。SCSSなしでも、:is(h1, h2, h3, h4, h5, h6)とすれば「h1～h6のどれか」という指定ができて、.single-post-wrap > :is(h1, h2, h3, h4, h5, h6):nth-child(1)のように他のセレクタに混ぜ込んでも使えます（MDN）。

ただし、IEは非対応な他、Firefoxは:-moz-anyと書かないといけないなど、（モバイルでWebKit系に決め打ちできる状況でなければ）実用はしづらいです。

Comments

[teityura]

回答ありがとうございます！
:is()というセレクタがあるんですね。

WordPressのテーマによって勝手に生成する
:nth-child(X)のX部分が、
01～99の範囲でランダムに入っているとすれば、
JavaScript等でループして適用する他ないでしょうか。
可能なら追加CSSのみで、上書き適用したくて悩んでます。

Answer 2

CSSにおいて[]は属性を拾うものですから文法として整合性があわないですね
単純にclassをあたえてあげるとか、カスタムdataで処理するとかが賢明です

Comments

[teityura]

回答ありがとうございます。
[]は正規表現的な指定でもなく、属性を拾う手段でしかないのですね。

Answer 3

細かいところまでできるか分かりませんがhXタグへの一括指定となるとSCSSでやることになると思います。

• Compass(Sass)で見出しタグを一括スタイル指定する

もっと細かくやろうとするとJavaScriptですかね。

Comments

[m.ts10806]

SCSSコンパイルすると結局h1,h2…になりますけど、記述時の負荷は減る　という程度ですね。

[teityura]

回答ありがとうございます。
SCSSというものがあったんですね。
細かい指定をするとJavascriptになるんですね。
覚えて損はなさそうなので、SCSS,Javascriptの勉強しなきゃです。

Answer 4

:nth-child(X)のX部分が、

01～99の範囲でランダムに入っているとすれば、
JavaScript等でループして適用する他ないでしょうか。

構成によりますが。

.single-post-wrap > h1:nth-child(n),
.single-post-wrap > h2:nth-child(n),
.single-post-wrap > h3:nth-child(n),
.single-post-wrap > h4:nth-child(n),
.single-post-wrap > h5:nth-child(n),
.single-post-wrap > h6:nth-child(n) {
    font-size: 28px;
}

/* 構造によっては */
.single-post-wrap > *:nth-child(n) {
    font-size: 28px;
}
.single-post-wrap > div {
    font-size: inherit;
}