CSSセレクターでの正規表現の使用

はい、CSS にも正規表現があります (アーメン)

CSS で目立つための 2 つの強力なツール: マトリックスと正規表現。

実際のところ、驚く必要はありません。結局のところ、CSS も言語であり、正規表現は特定の言語を超えた用途に役立つように作られています。

正規表現の一般的なルール

言語に関係なく、正規表現のルールは普遍的です。違いは、その書き方にある可能性があります。

正規表現は非常に奥が深いトピックであり、本当にそれについて話したいのであれば、分厚い本が書けるほどです。覚えるのが大変です。使いたいときは百度で検索するだけです…

その中には、特定の意味を持ち、正規表現の世界のルールを表す重要な文字がいくつかあります。

例えば：

• 文字 ^ は文字列の先頭が一致することを示します。
• 文字 $ は文字列の終了位置が一致することを示します。
• 文字 * は、文字列内の任意の位置が一致することを示します。
• 文字 i は、文字列の一致で大文字と小文字が区別されないことを示します。
• 文字 g は文字列のグローバル一致を示します。

等

これらのルールは CSS の世界でも普遍的です。

3つのCSS属性セレクターと正規表現

CSS 属性セレクターの開発は現在、次の 3 つの段階に分かれています。

CSS2.1 属性セレクタ直接マッチング: [attr]、[attr="val"]、[attr~="val"]、[attr|="bar"]

CSS3 属性セレクタの正規マッチング: [foo^=”bar”]、[foo$=”bar”]、[foo*=”bar”]

CSS4 属性セレクターは大文字と小文字の一致を無視します: [attr="val" i]

このうち、最後の 2 つのステージは通常のマッチング ステージに属します。CSS の発展に伴い、より複雑な通常マッチングが登場するはずですので、今後に注目しましょう。

では、これらの多くの属性マッチング記述方法は何を意味するのでしょうか?

次のように：

[属性]

要素に attr 属性がある限り:

<div 属性="val"></div>      
<div 属性="テキスト値"></div> 
<div 属性="値"></div>    
<div attr="値-ue"></div>

[属性=”値”]
要素の属性名は「attr」であり、値は「val」である必要があります。

<div 属性="val"></div>      
<div 属性="テキスト値"></div> 
<div 属性="値"></div>    
<div attr="値-ue"></div>

[属性=”値”]

「attr」値には「val」という単語が含まれている必要があります。ここでの文言は文字ではなく「単語」であることに注意してください。CSS は英語を母国語とする外国人によって発明されました。英語の文章は単語 + スペース + 単語で構成されています。したがって：

<div 属性="val"></div>      
<div 属性="テキスト値"></div> 
<div 属性="値"></div>    
<div attr="値-ue"></div>

CSS2.1 の時点では、CSS は他の国の言語をそれほど深く考慮していませんでした。したがって、ここでのような「単語」の一致は、ASCII 範囲の文字に対してのみ機能します。中国語の場合、中国語の単語の途中にスペースを入れて「単語」として扱っても意味がありません。したがって：

[attr~="私"]
<div attr="私はとてもハンサムです"></div>

[属性|=”バー”]

'attr' 属性値は、bar という単語で始まるか、bar- で始まる必要があります。繰り返しますが、これは「文字」ではなく「単語」なので、次のようになります。

<div 属性="バー"></div>       
<div attr="bar-val"></div>   
<div 属性="barval"></div>    
<div attr="バー val"></div>

同様に中国語もサポートされていません。中国語をサポートするには、CSS3 属性セレクターを使用してください。

上記の CSS2.1 属性セレクターは、IE7 ブラウザ以降でサポートされます。ただし、IE7 ブラウザは厳密にはサポートされていません。

[属性=^”値”]

値の最初の 3 文字は val である必要があります。

<div 属性="val"></div>      
<div 属性="テキスト値"></div> 
<div 属性="値"></div>    
<div attr="値-ue"></div>

上記の[attr|="bar"]を見比べると、「単語」と「文字」の違いがわかります。

[属性$=”値”]

属性値の最後の 3 文字は val である必要があります。

<div 属性="val"></div>      
<div 属性="テキスト値"></div> 
<div 属性="値"></div>    
<div attr="値-ue"></div>

[属性*=”値”]

属性値には、どこにでも 3 つの文字 val を含めることができます。

<div 属性="val"></div>      
<div 属性="テキスト値"></div> 
<div 属性="値"></div>    
<div attr="値-ue"></div>

上記の 3 つの属性セレクターは CSS3 に属しますが、驚くべきことに IE7 ブラウザでもサポートされています。 IE8 ブラウザが CSS3 のボックス サイズをサポートしたようです。テストでいつも 38 点を取る Xiao Ming が突然 61 点を取ったように感じます。予想外でしょうか、それとも驚きでしょうか?

最後のヘビー級ゲスト、大文字と小文字を区別しない i:

[属性演算子値 i]

たとえば、[attr~=”val” i]、[attr*=”val” I] などはすべて有効な書き方です。 「i」も大文字にすることができます。
正規表現の i の機能と同様に、大文字と小文字は無視されます。中国語などの言語には大文字と小文字の概念がないため、この機能は ASCII 範囲の文字にのみ適用されます。

比較するために、既存のセレクタ [attr*="val"] という簡単な例を挙げてみましょう。次のようになります。

<div 属性="VAL"></div>      
<div attr="テキスト値"></div> 
<div attr="値"></div>    
<div attr="値"></div>

ただし、余分な i がある場合、code>[attr*=”val” i] となり、次のようになります。

<div 属性="VAL"></div>      
<div attr="テキスト値"></div> 
<div attr="値"></div>    
<div attr="値"></div>

大文字または小文字の任意の文字に一致します。

互換性

現在、Chrome、FireFox、Safari は i 正規表現をサポートしていますが、IE はサプライズ後に元の状態に戻り、IE14 でも大文字と小文字を区別しない機能がまだサポートされていません。

この機能は、近いうちに実際のプロジェクトに適用できると予想されます。

例

百聞は一見にしかず。セレクタの正規表現に関する簡単なデモを作成しました。こちらをクリックしてください: CSS セレクタ正規表現デモ

次の CSS:

li[データインデックス^='t'] {
    色: 赤;    
}
li[データインデックス^='f'] {
    色: 青;    
}
li[データインデックス^='f' i]:after {
    内容: '✓正規表現をサポートします';
    色: 緑;
}

Firefox ブラウザでの結果:

大文字と小文字を区別しない場合は、キャプチャできる<li> 1 つだけであり、余分な i があるため、両方がクエリされることがわかります。

CSS セレクターでの正規表現の使用に関するこの記事はこれで終わりです。CSS セレクターの正規表現に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。