1

あるサイトのユーザアイコン画像をchrome拡張機能のStylusで非表示にしたいと考えています。
下記属性値の、thumb-"数値"-200-"ユーザごとのランダムな英字"がユーザを識別する値のようです。
このように記述することで非表示にすることはできたのですが、多くのユーザを非表示にする場合
何十行も書く必要がありますので、コンパクトにしたいと思っています。

img[src="https://www.hogehoge.net/main-thumb-820175124-200-cbshjqxgjchfjxbdzgxitlwlrnvmtxiw.jpeg"]{
  display: none!important;
}

img[src="https://www.hogehoge.net/main-thumb-747599263-200-cijjkbordrtwjjtxktciizilrziknspa.jpeg"]{
  display: none!important;
}

img[src="https://www.hogehoge.net/main-thumb-67848035-200-ytmfcbvrexpzixcrdfbdvwzdgpwlpsia.jpeg"]{
  display: none!important;
}

この記述を1行にまとめる、または正規表現やその他の方法でコンパクトにする記述方法はありますでしょうか?
CSSで複数の属性セレクタを指定する - Qiita
上記リンクを参考に、属性値を連続して記述する方法では非表示に出来ませんでした。

img[src="https://www.hogehoge.net/main-thumb-67848035-200-ytmfcbvrexpzixcrdfbdvwzdgpwlpsia.jpeg"][src="https://www.hogehoge.net/main-thumb-67848035-200-ytmfcbvrexpzixcrdfbdvwzdgpwlpsia.jpeg"]{
  display: none!important;
}

よろしくお願いいたします。

2
  • 現状だと CSS のスタイルではなく、HTML の URL で判定している気がします。
    – cubick
    2021年12月23日 6:21
  • cubickさん おっしゃるとおり、HTMLのURLでアイコン画像は指定されています。CSSと直接関係無かったら、私の理解不足です。 コメントをありがとうございました!
    – genmai
    2021年12月23日 12:37

1 件の回答 1

1

^= (前方一致) や $= (後方一致) といった演算子を使って絞り込むことができます。正規表現ほど強力ではありませんが、たとえば次のような書き方をすると、質問にあるURLにはマッチします。

/* src 属性が "https://www.hogehoge.net/main-thumb-" で始まる img 要素にマッチ */
img[src^="https://www.hogehoge.net/main-thumb-"]  { ... }

/* src 属性が ".jpeg" で終わる img 要素にマッチ */
img[src$=".jpeg"] { ... }

/* src 属性が "thumb" を含む img 要素にマッチ */
img[src*="thumb"] { ... }

あるいは隠したいユーザが決まっている(すべてではない)のであれば、次のようにするのが精一杯だと思います。

img[src="https://www.hogehoge.net/main-thumb-820175124-200-cbshjqxgjchfjxbdzgxitlwlrnvmtxiw.jpeg"],
img[src="https://www.hogehoge.net/main-thumb-747599263-200-cijjkbordrtwjjtxktciizilrziknspa.jpeg"],
img[src="https://www.hogehoge.net/main-thumb-67848035-200-ytmfcbvrexpzixcrdfbdvwzdgpwlpsia.jpeg"]{
  display: none !important;
}

参考:属性セレクター - CSS: カスケーディングスタイルシート | MDN

5
  • 1
    sei0oさん (うまくユーザ名にリンクが貼れない汗) 回答をありがとうございます!最初の正規表現ですとすべての画像が消えてしまいダメでしたが、カンマで繋げる記述で無事非表示にすることができました。 とても勉強になりました。ありがとうございました! P.S. 私の信用度が低くて投票に至らず恐縮です…。
    – genmai
    2021年12月23日 12:40
  • 1
    @genmai (@ に続けて打つとユーザー名の候補が出ます)うまくいってよかったです。なお、信用度がなくても、質問者が解決済みをつけると回答者に+15点が入ります :)
    – sei0o
    2021年12月24日 4:39
  • @sei0oさん 「質問者の解決済み」は「回答の承認」とは違いそうですね。ちょっと確認したいと思います。重ね重ね、ありがとうございます!
    – genmai
    2021年12月24日 6:30
  • 調べたところ、ふさわしい回答にチェックをつけるのが解決済みと同じ意味のようで、よかったです。(ja.meta.stackoverflow.com/questions/1735/…)
    – genmai
    2021年12月24日 6:36
  • 他の質問に回答して信用度を得ましたので、改めてプラスさせていただきました!
    – genmai
    2021年12月26日 12:40

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。