[解決済み] インラインスタイル属性による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セレクタでは不可能です。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] インラインCSSでa:hoverを記述するには?
-
[解決済み] 最初の要素にクラスを指定するCSSセレクタ
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] 特定のクラスや属性を持たない要素を選択するCSSセレクタは書けますか?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Bootstrap 3.3.7で改行する方法
-
[解決済み] CSS - カーソルを置いたときに塗りつぶしの色を変更する - SVG PATH
-
[解決済み] HTMLにおける'"'エンティティの使用法
-
[解決済み] <button> vs. <input type="button" />. Which to use?
-
[解決済み] <meta charset="utf-8"> vs <meta http-equiv="Content-Type">.
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] Sublime Text 2を使ってHTMLコードを再フォーマットするにはどうしたらいいですか?
-
[解決済み] div内の要素を縦に並べるにはどうしたらいいですか?
-
[解決済み] フレックスアイテムを右寄せにするには?
-
[解決済み] テーブル内のテキストアラインクラス