この記事では、CSSのセレクタを正規表現で行う方法とサンプル例をまとめました。
セレクタの正規表現
CSSのセレクタは、正規表現で行うこともできます。
これにより効率の良い記述ができます。
| 書式 | セレクタ | 記述例 | 説明 |
|---|---|---|---|
| 属性 | [属性名] | div[class] | class属性をもつ全てのdivタグを指定 |
| 属性値 | [属性名=”属性値”] | 指定した属性値をもつ要素全て(完全一致) | div[type=”box”]|class属性値「box」をもつ全てのdivタグを指定 |
| 属性値（先頭一致） | [属性名^=”属性値の文頭”] | div[class^=”b”] | class属性値「b」を文頭にもつ全てのdivタグを指定 |
| 属性値(末尾一致) | [属性名$=”属性値の末尾”] | div[class$=”x”] | class属性値「x」を末尾にもつ全てのdivタグを指定 |
| 属性値（部分一致） | [属性名*=”属性値の一部”] | div[class*=”o”] | class属性値「o」を一部にもつ全てのdivタグを指定 |
| – | 関連記事 |
|---|---|
| 1 | 【HTML/CSS入門】Web制作のサンプル集 |
| 2 | 【Javascript入門】サンプル集 |
コメント