85299


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

[code]

    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;
    }
    
[/code]

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

[code]

    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;
    }
    
[/code]

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


CC BY-SA 4.0
2021-12-22T23:12:06.963
85282
2021-12-23T08:17:36.553
37886
question
css
StylusでCSSの属性値を複数指定する方法はありますか？


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

[code]

    /* 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"] { ... }
    
[/code]

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

[code]

    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;
    }
    
[/code]

参考：[属性セレクター - CSS: カスケーディングスタイルシート |
MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors)


CC BY-SA 4.0
2021-12-23T08:17:36.553
85299
2021-12-23T08:17:36.553
7500
85282
answer