CSSで正規表現を使用していますか？

s1、s2などの形式のIDを持つdivを含むHTMLページがあります。

<div id="sections">
   <div id="s1">...</div>
   <div id="s2">...</div>
   ...
</div>

これらのセクション/ divのサブセットにidに応じてcssプロパティを適用したい。ただし、divを追加するたびに、このようにセクションのcssを個別に追加する必要があります。

//css
#s1{
...
}

私はセットにスタイルを適用するために使用できるCSSでの正規表現のようなものがあるのdivが。

以前の回答が示すように、正規表現の形式なしでそれらの要素を選択することを管理できますが、質問に直接回答するには、はい、セレクターで正規表現の形式を使用できます。

#sections div[id^='s'] {
    color: red;  
}

つまり、IDが文字「s」で始まる#sections div内のdiv要素を選択します。

ここフィドルを参照してください。

W3 CSSセレクタードキュメントはこちら。

この回答を補完するものとして$、最後の一致*を取得し、値の名前の任意の場所で一致を取得するために使用できます。

マッチの任意の場所：.col-md、.left-col、.col、.tricolor、など

[class*="col"]

最初に一致します.col-md、.col-sm-6など

[class^="col-"]

エンディングで一致します.left-col、.right-colなど

[class$="-col"]

IDは、要素を一意に識別するためのものです。それに適用されるスタイルも、その要素に固有でなければなりません。多くの要素に適用したいスタイルがある場合は、IDセレクターに依存するのではなく、それらすべてにクラスを追加する必要があります...

<div id="sections">
   <div id="s1" class="sec">...</div>
   <div id="s2" class="sec">...</div>
   ...
</div>

そして

.sec {
    ...
}

または、特定のケースでは、次のように、親コンテナ内に他に何もない場合は、すべての部門を選択できます。

#sections > div {
    ...
}

まず、HTMLドキュメント内のアイテムを照合する方法はたくさんあります。このリファレンスから始めて、スタイルルールを要素に適用するために使用できるいくつかのセレクター/パターンを確認します。

http://www.w3.org/TR/selectors/

のdiv直接の子孫であるすべてのに一致します#main。

#main > div

のdiv直接または間接の子孫であるすべてのに一致します#main。

#main div

のdiv直接の子孫である最初のものと一致し#sectionsます。

#main > div:first-child

div特定の属性と一致します。

#main > div[foo="bar"]

次のように、各DIVにクラスを追加して、クラスにルールを適用するだけです。

HTML：

<div class="myclass" id="s1">...</div>
<div class="myclass" id="s2">...</div>

CSS：

//css
.myclass
{
   ...
}

通常*は、必要な文字を含むすべての文字列を取得するときに使用します。

* 正規表現で使用され、すべての文字を置き換えます。

SASSまたはCSSでの使用は次のようなもので[id*="s"]、IDが「s ......」のすべてのDOM要素を取得します。

/* add red color to all div with id s .... elements */

div[id^="s"] {
    color: red;
}

私の一般的なCSS正規表現を試してください

(([a-z]{5,6}.*?\))|([\d.+-]?)(?![a-z\s#.()%])(\d?\.?\d?)?[a-z\d%]+)|(url\([/"'][a-z:/.]*['")]\))|(rgb|hsl)a?\(\d+%?,?\s?\d+%?,?\s?\d+%?(,\s?\d+\.?\d?)?\)|(#(\w|[\d]){3,8})|([\w]{3,8}(?=.*-))

デモhttps://regexr.com/4a22i

CSSで特定の要素を選択する別の簡単な方法もあります...

#s1, #s2, #s3 {
    // set css attributes here
}

選択する要素がいくつかあり、クラスを気にしたくない場合は、これも簡単に機能します。