# Inspect element - add new class

**URL:** <https://discourse.mozilla.org/t/inspect-element-add-new-class/32487>\
**Category:** Developer Tools\
**Created:** [October 10, 2018, 3:44pm UTC](https://discourse.mozilla.org/t/inspect-element-add-new-class/32487 "2018-10-10T15:44:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![matemolnar88](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/matemolnar88/32/24516_2.png) [@matemolnar88](https://discourse.mozilla.org/u/matemolnar88)\
**Post date:** [October 10, 2018, 3:44pm UTC](https://discourse.mozilla.org/t/inspect-element-add-new-class/32487/1 "2018-10-10T15:44:18Z")

</div>

Hi guys,

It’s been a while I’m using the firefox and I really like it. Especially the developer edition, full of useful tools and etc.

But I also came across with a strange thing (for me at least) which is in the “inspect element” area. For example - if you go to the [http://getbootstrap.com/](http://getbootstrap.com/) site. And open up the inspect elements and select an area (a div for instance) and then in the style section (right part of the inspect elements bar) choosing the “toggle classes” button and then type a bootstrap class - for example the “bg-primary” which will coloring the background of an element. You will see then the result before you hit the enter. Most browsers will does it, except the firefox. In firefox you have to hit the enter to see the outcome.

I would **very** much **appreciate** it if someone could help me about this.

 ![](https://sea1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/6/9/696d089c621a088c2810ae6f6fe58f788583f925.png)

> **[Bootstrap](https://getbootstrap.com/)**
>
> Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

---

<div class="post-metadata">

**Author:** ![pbro](https://avatars.discourse-cdn.com/v4/letter/p/9d8465/32.png) [@pbro](https://discourse.mozilla.org/u/pbro)\
**Post date:** [October 11, 2018, 1:32pm UTC](https://discourse.mozilla.org/t/inspect-element-add-new-class/32487/2 "2018-10-11T13:32:30Z")

</div>

I had no idea that Chrome did this without typing enter. I’m the one who implemented the feature in Firefox, and yes, you do have to press enter there unfortunately.  
Doing like Chrome seems like a good idea. So I’ve filed a bug for us to think about doing it in the future: [https://bugzilla.mozilla.org/show\_bug.cgi?id=1498224](https://bugzilla.mozilla.org/show_bug.cgi?id=1498224)  
Thank you for reporting this!

---

<div class="post-metadata">

**Author:** ![matemolnar88](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/matemolnar88/32/24516_2.png) [@matemolnar88](https://discourse.mozilla.org/u/matemolnar88)\
**Post date:** [October 11, 2018, 3:21pm UTC](https://discourse.mozilla.org/t/inspect-element-add-new-class/32487/3 "2018-10-11T15:21:08Z")

</div>

Good news! I will be pleased the most! I can’t wait to use it FF!  
Thank you very much!

---

<div class="post-metadata">

**Author:** ![matemolnar88](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/matemolnar88/32/24516_2.png) [@matemolnar88](https://discourse.mozilla.org/u/matemolnar88)\
**Post date:** [October 11, 2018, 4:53pm UTC](https://discourse.mozilla.org/t/inspect-element-add-new-class/32487/4 "2018-10-11T16:53:28Z")

</div>

It seems like, using the site’s (own) style behind the scenes. It makes sense for me. Otherwise the site will take no effect at all. That what I figured out so far. How this method could work with the “add new class” feature