すべてのdivを選択してください。中間のID番号の部分のみ

Question

これらのdivのID名はすべて同じで、中には異なる番号が付いています。

<div id="myid1region">text</div> 
    <div id="myid20region">text</div> 
    <div id="myid333region">text</div> 
    <div id="myid4region">text</div> 

すべてのdivをcssで選択するにはどうすればよいですか？

div#myid[*]region { } 

私はしたいが、結果グループでは、この<div id="myid[numbers]region.read">text</div>を得ることはありません

Answer 1

あなたはattribute selectorsを探しています：

div[id^="myid"][id$="region"] { 
 
    color: red; 
 
}

<div id="myid1region">text</div> 
 
<div id="myid2region">text</div> 
 
<div id="myid3region.read">text</div> 
 
<div id="myid4region">text</div>

説明を上MDNドキュメントから[attr$=value]：

属性名がattrで、値に "value"が付いている要素を表します。

つまり、これで末尾のidはすべてregionになります。これにより、region.readで終わるidが除外されます。あなたはregionで終わる他のid秒を持っている場合は

が、ないmyidで始まる、あなたはregionにmyidと終了でを開始のみid Sに一致する、あなたのセレクタがより明確にすることができます。

div[id^="myid"][id$="region"] { ... }