1. ホーム
  2. html

[解決済み] インラインスタイル属性によるCSSセレクタ

2022-06-27 22:03:33

質問

この要素をインラインスタイル属性の値で選択するCSSセレクタはありますか?

<div style='display:block'>...</div>

のようなものです。

div[cssAttribute=cssValue]

どのように解決するのですか?

インラインの style 属性は他の HTML 属性と何ら変わりなく、部分文字列属性セレクタでマッチさせることができます。

div[style*="display:block"]

しかし、まさにこのような理由で 非常に壊れやすい . 属性セレクタは正規表現をサポートしないので、できるのは 正確な の部分文字列マッチしかできません。例えば、以下のように属性値のどこかにスペースがある場合。

<div style='display: block'>...</div>

スペースに対応するようにセレクタを変更するまでマッチしません。そして、その後に でない値にはマッチしなくなります。 がスペースを含んでいる値にはマッチしなくなります。しかし、インライン スタイル宣言自体がまったく変更される可能性がないドキュメントで作業している場合は、問題ないでしょう。

また、これは ではなく は、DOM に反映された実際の指定値、計算値、使用値によって要素を選択するものでは全くないことに注意してください。 その はCSSセレクタでは不可能です。