快適なSNSにするためのCSSセレクタを書く

SNS疲れの原因になる余計なものを消したい

フォロー・フォロワー数、いいね数、「おすすめ」…etc
こういうものの表示を設定メニューで切り替えられないとき、ブラウザ版に限ればユーザースタイルシートを使って表示を調整する手があります。
ユーザースタイルシートの設定といえばブラウザ拡張のStylusが有名どころでしょうか。

消したい要素のセレクタを書くために

いざCSSで調整しようと要素を見てみるとユーティリティクラスしかなかったりハッシュ化されてランダムなクラス名だけがついたdivタグだらけだったりすることがあります。
こうなってると任意のセレクタを書くためには要素名・クラス名だけでは消したい場所を指定するのが厳しく他で要素を限定しなくてはいけません。

この 「要素名・クラス名に頼らず特定の要素のセレクタを書く」 というのが多様なCSSセレクタを覚えるためのいい練習になったりします。
最近使えるようになった:has()なんかはめちゃくちゃ重宝することに気づきます。

以下はX（旧Twitter）で画面から消したいものを消すときのセレクタの一例です。
指定した要素をdisplay: none;で非表示にしていきます。

X（旧Twitter）の画面から消したいものを消す

いいね・RT・ブックマーク数を消す

ポストの下に表示される数字を消します。
（近日のアプデでもう公式で消えるという噂もありますが…）

span[data-testid="app-text-transition-container"] {
    display: none;
}

ハッシュ化クラス名だらけのdivとspan群をたどりながらハッシュ化されていない部分で共通点を探します。
すると数字を囲っているspanにdata-testid="app-text-transition-container”という属性が共通で入っていることに気づきます。
（名前からして数字のカウントアップダウンのアニメーションに共通するものでしょうか？）
属性をセレクタに使いたいときは[{属性名}="｛値}"]と書くので[data-testid="app-text-transition-container"]とするとこの数字の部分だけ選択できます。
このdata-testid属性は比較的わかりやすい値が入っているので手がかりにしやすいです。

フォロー・フォロワー数を消す

プロフィール画面やTLのアイコンにマウスオンしたときのフォロー・フォロワー数を消すことができます。
フォロワー数が減ると気になってしまう人にはぜひ取り入れてほしい。

a[href*="follow"] {
    display: none;
}

フォロー・フォロワー数を表示している箇所の共通点を探します。
どちらもaタグのhref属性に”follow”の文字が入っています（/verified_followersと/following）

{属性名}*=“{部分一致させたい文字列}”と書くと属性の値の部分一致を指定できます。これを使って href属性に”follow”の文字列が入っているものをまとめて選択できるようになります。

ポストメニューで余計な操作メニューを消す

ポストの”...”にあるこのメニューのことです。

ポストの引用RTが見たくてよくこのメニューを押すのですが周りにあるフォローやミュート・ブロックボタンの誤操作が怖いのでこのあたりのメニューを消します。

div[role="menuitem"]{
    display: none;
}

このメニューのアイテムを見ると共通して属性にrole="menuitem”があります。
エンゲージメントの表示やリストへの追加などはaタグ、フォローやミュート・ブロックなど一番触りたくないメニューはdivタグになっています。
ちょうど残したい操作のメニューがaタグになっているのでrole="menuitem”を持ってるdivタグだけ消してしまいます。
※ divタグの法を消すと通報ボタンや「興味がない」のメニューも消えるのでこれを残したい場合は調整がいります。
※ ここのメニューは画面によって表示されるものが変わるので:nth-child()を使って限定すると意図したメニューが消えない事があるので注意。

ホームの「おすすめ」タブを消す

余計な情報で心を乱してくる一番の元凶のこのタブを消しましょう。
（おすすめに表示されたフォロイーのポストは通常のTLに表示されない問題はあるようですが...）

div[role="presentation"]:has(a[href="/home"]):first-child {
	display: none;
}

ホーム画面のタブを見るとすべてのタブに[href="/home”]の入ったaタグがあります。
その親になってるdivにはrole="presentation”があることと、おすすめタブは常に一番左（一番最初）にあるので「href="/home”を子に持ったrole="presentation”属性のある最初（:first-child）のdiv」で選択できます。

メディア・リンクがあるポストだけ表示する

テキストだけのポストを非表示にすることで、「作家さんの自我ポスト減らして作品だけ見たい」を実現する手段のひとつです。

article[data-testid="tweet"]:not(:has([data-testid="tweetPhoto"])):not(:has([target="_blank"])):not(:has([data-testid="card.wrapper"])){
	display:none;
}

:has()で画像・外部リンクを子に持っているポストのarticleタグを指定して:not()で「それ以外」にすることでテキストだけのポストを選択します。

もっと効率いい書き方ありそうだしそもそもアプデがあると無効になるものですが…
クラス名以外でのセレクタの書き方を覚えるにはいい練習になるしついでにSNSも快適になるよ、という話でした。

ポイントはハッシュ化クラス名だらけのdivやspan群の中からハッシュ化されていない部分で共通点を探すことです。
今回はXの例だけ書きましたが他のSNSでも応用できると思います。