@b481 さん、こんにちは。
お探しのものは「CSS セレクター」(略して単に「セレクター」とも呼ばれます)と呼ばれます。CSS セレクターは、スタイルを適用したい DOM 要素を「見つける」(つまり選択する)ために使用されます。
例えば、今私がタイピングしている場所から、コンポーザー内のあなたのユーザー名(b481)のセレクターを探してみましょう(これは単なる例です)。
まず、マウスカーソルをその要素(コンポーザー内の b481 というユーザー名)の上に移動させ、右クリックします。するとメニューが表示され、「Inspect(検証)」という項目があります。
「Inspect」をクリックすると、開発者コンソールが開きます(私は現在 macOS の Chrome を使用しています)。運が良ければ、目的の要素がハイライト表示されます。
コンソールでハイライトされた要素上で右クリックすると、「Copy(コピー)」→「Copy selector(セレクターをコピー)」というメニュー項目が表示されます。
これを選択してセレクターをコピーすると、この例では以下のようになります。
#ember433 > span > a
これはあまり良いセレクターではありません。なぜなら #ember433 は Ember によって割り当てられるためです。しかし、コンソール内の要素上にマウスを移動させると、対象のページとコンソールの両方で要素がハイライト表示されます。幸いなことに、これで簡易的に概略を把握できました。
次に、非表示にしたい要素を見つけ、この例ではその要素(このケース)上で再度右クリックし、マウスカーソル下のメニューから「add attribute(属性の追加)」を選択して、セレクターのテストを行うことができます。
私はこれを例として以下のキャプチャで行いました。
これで、ID が ‘b481’ の要素がその DOM の部分で非表示になっています。
つまり、この場合、以下の CSS を使用すればよいことがわかります。
span.action-title{
display:none;
}
これをテーマに追加すれば、その要素を非表示にできます。
この場合、同じセレクターを持つ要素がページ上に複数存在しないか確認し、また、選択したセレクターが「貪欲」になり、非表示にしたくない他のページの要素まで選択しないかも確認する必要があります。
セレクターはより具体的であればあるほど良いでしょう。
例えば、このケースでは、セレクターを親要素の子要素として指定することで、より具体的にできます(未検証)。
div.compose-action-title > span.action-title{
display:none;
}
ご覧の通り、より具体的になっています。この時点で、変更したい要素を探す方法について、かなり良いイメージが掴めたはずです。
良い探索を!
最後に一点だけ。
JavaScript や jQuery を使って要素を選択することもできますが、Discourse/Ember のような SPA アプリでは、少なくとも私の場合、CSS セレクターがよく機能します。JavaScript セレクターは、DOM を「巧妙な」方法でトラバースする必要がある場合(これも非常に楽しいですが)にのみ使用する傾向があります。
お役に立てれば幸いです。
関連記事:




