# Adding unique class names to to the elements in the topic map

**URL:** <https://meta.discourse.org/t/adding-unique-class-names-to-to-the-elements-in-the-topic-map/29424>\
**Category:** Feature\
**Tags:** topic-map\
**Created:** [May 29, 2015, 5:30pm UTC](https://meta.discourse.org/t/adding-unique-class-names-to-to-the-elements-in-the-topic-map/29424 "2015-05-29T17:30:35Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![OnceWas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/oncewas/32/40734_2.png) [@OnceWas](https://meta.discourse.org/u/OnceWas)\
**Post date:** [May 29, 2015, 5:30pm UTC](https://meta.discourse.org/t/adding-unique-class-names-to-to-the-elements-in-the-topic-map/29424/1 "2015-05-29T17:30:35Z")

</div>

Related in spirit to [this feature request](https://meta.discourse.org/t/adding-unique-id-to-custom-user-fields/29423), I would like to be able to target elements of the topic map through CSS.

![](https://global.discourse-cdn.com/meta/optimized/3X/a/8/a873b8ec6d08343251c75cb6d1f267234ec3e60a_2_690x63.png)

This is another place where CSS can’t individually target elements:

![](https://global.discourse-cdn.com/meta/original/3X/4/8/48fc4eed259f76e12b0fdcd601b7ac22d08967f6.png)

The elements in this section are not uniquely accessible.

If anybody would find this helpful, I made the following changes to topic-map.hbs:

```
<section {{bind-attr class=":map mapCollapsed"}}>
  <ul class="clearfix">
    <li class='topic-map-created'>
      <a href='{{unbound topic.url}}'>
      <h4>{{i18n 'created_lowercase'}}</h4>
      {{avatar details.created_by imageSize="tiny"}}
      {{format-date topic.created_at}}
      </a>
    </li>
    <li class='topic-map-lastpost'>
      <a {{bind-attr href="topic.lastPostUrl"}}>
      <h4>{{i18n 'last_reply_lowercase'}}</h4>
      {{avatar details.last_poster imageSize="tiny"}}
      {{format-date topic.last_posted_at}}
      </a>
    </li>
    <li>
      {{number topic.replyCount}}
      <h4>{{i18n 'replies_lowercase' count=topic.replyCount}}</h4>
    </li>
    <li class='secondary topic-map-views'>
      {{number topic.views class=topic.viewsHeat}}
      <h4>{{i18n 'views_lowercase' count=topic.views}}</h4>
    </li>
    <li class='secondary topic-map-participants'>
      {{number topic.participant_count}}
      <h4>{{i18n 'users_lowercase' count=topic.participant_count}}</h4>
    </li>
    {{#if topic.like_count}}
      <li class='secondary topic-map-likes'>
        {{number topic.like_count}}
        <h4>{{i18n 'likes_lowercase' count=topic.like_count}}</h4>
      </li>
    {{/if}}
    {{#if details.links.length}}
      <li class='secondary topic-map-links'>
        {{number details.links.length}}
        <h4>{{i18n 'links_lowercase' count=details.links.length}}</h4>
      </li>
    {{/if}}
    {{#if showPosterAvatar}}
      <li {{bind-attr class=":avatars mapCollapsed::hidden"}}>
        {{#each p in details.fewParticipants}}
          {{topic-participant participant=p}}
        {{/each}}
      </li>
    {{/if}}
  </ul>
</section>

```

I added a unique class name to each of the elements/list items. This lets you target individual elements in the topic map for styling with CSS.

If the Discourse team finds this useful, I can contribute this change myself, or if anybody else wants to run with it, feel free to take it.

It would be very helpful, as a general development principle, to make sure to add unique classes or ids to HTML elements whenever possible.

---

_[View the full topic](https://meta.discourse.org/t/adding-unique-class-names-to-to-the-elements-in-the-topic-map/29424)._