Stylish で特定の文字列を含む「属性」を持つ要素を消す - CSS における属性を利用した要素の特定

「Stylish で特定の要素を消す」の続き。

1. 要素の属性の値により指定したい

前回 Stylish で作成したスタイルに、新しくスタイルを追加する。

スタイルを新たに追加する方法は、

1. Stylish のアイコンをクリックして、
2. 前回作成したスタイルを右クリック。

(cf. Greasemonkey, Stylish で既存のスクリプトを素早く編集)

今回は、

a 要素の href 属性に `new/main’ が含まれる a 要素を消したい。

とする。

 

2. *=, ^=, $= によって属性を指定

広告をブロックするための、Stylish のスタイル 

• Ad Blocking FiltersetP

を見ると、以下の記述がされている。

[alt*="Advertising"]

この書き方は Selectors によると、

E[foo*="bar"]
an E element whose "foo" attribute value contains the substring "bar"

要素 E の内、属性 foo の値として、bar を含むものを対象とすることができる。

つまり、上例の意味は、

alt 属性に Advertising という文字列が含まれている要素

を指定していることになる。

 

要素の属性に対する基本な指定方法

基本的な CSS による、要素の特定の仕方は、以下のものがある。

E[foo]
an E element with a "foo" attribute

要素 E の内、foo 属性を持つもの。

E[foo="bar"]
an E element whose "foo" attribute value is exactly equal to "bar"

要素 E の内、属性 foo の値が、bar であるもの。

 

要素の属性の値の一部に一致するか検査する

基本的な書き方以外に、正規表現の書き方に似た方法もある。

E[foo^="bar"]
an E element whose "foo" attribute value begins exactly with the string "bar"

要素 E の内、foo 属性の値の先頭が bar ではじまるもの。

E[foo$="bar"]
an E element whose "foo" attribute value ends exactly with the string "bar"

要素 E の内、foo 属性が bar で終わるもの。

E[foo*="bar"]
an E element whose "foo" attribute value contains the substring "bar"

要素E の内、foo 属性の値に bar を含むもの。

よって、今回は以下のようにして指定することができる。

 a[href*="news/main"] {display: none !important;}

 

3. 参考

• CSS セレクタに関するおさらい | WWW WATCH

4. 関連記事

• Stylish で特定の要素を消す