# CSSで/latestを/newなどとは異なるように扱う

**URL:** https://meta.discourse.org/t/address-latest-differently-then-new-etc-via-css/135240
**Category:** Support
**Created:** [2019 年 12 月 6 日午前 8:52 UTC](https://meta.discourse.org/t/address-latest-differently-then-new-etc-via-css/135240 "2019-12-06T08:52:00Z")
**Posts on this page:** 1
**Showing post:** 4

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [2019 年 12 月 6 日午前 9:33 UTC](https://meta.discourse.org/t/address-latest-differently-then-new-etc-via-css/135240/4 "2019-12-06T09:33:53Z")

</div>

テーマの `header` タブにこれを追加すると、ナビゲーション時に `body` タグにクラスが追加されます。

```markdown
<script type="text/discourse-plugin" version="0.8">
api.modifyClass("component:d-navigation", {
  didInsertElement() {
    document.body.classList.add(`filter-mode-${this.filterType}`);
  },

  willDestroyElement() {
    document.body.classList.remove(`filter-mode-${this.filterType}`);
  }
});
</script>

```

これにより、以下のように `filter-mode-FILTERMODE` というクラスが追加されます。

```plaintext
filter-mode-top
filter-mode-new
filter-mode-latest

```

その後、`navigation-topics` クラスと組み合わせて CSS を特定のように設定できます。

```plaintext
.navigation-topics.filter-mode-new {
  // 処理を実行
}

```

CSS を使用して画像を非表示にしても、ブラウザが画像をダウンロードするのを防ぐことは **できません** 。これにより帯域幅の節約はできず、視覚的な変更のみが行われます。

また、素敵なサイトですね 👍

---

_[View the full topic](https://meta.discourse.org/t/address-latest-differently-then-new-etc-via-css/135240)._