# Display / Rename IDs in Studio Editor

**URL:** <https://forum.wixstudio.com/t/display-rename-ids-in-studio-editor/59956>\
**Category:** Ask the community\
**Tags:** question, wix-studio\
**Created:** [June 15, 2024, 1:58am UTC](https://forum.wixstudio.com/t/display-rename-ids-in-studio-editor/59956 "2024-06-15T01:58:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![L-L](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/l-l/32/82835_2.png) [@L-L](https://forum.wixstudio.com/u/L-L)\
**Post date:** [June 15, 2024, 1:58am UTC](https://forum.wixstudio.com/t/display-rename-ids-in-studio-editor/59956/1 "2024-06-15T01:58:00Z")

</div>

**Question:**  
In the Studio editor, I see that I can select “Display IDs” in the Layers panel, and then I can rename these IDs as I see fit. But it doesn’t appear the IDs are actually changed on the front-end when inspecting. Am I misunderstanding how this should work?

**Product:**  
Wix Studio Editor

**What are you trying to achieve:**  
To better target sections & elements for applying styles, it would be very helpful to have intuitively-named IDs. I know I can add classes, but an ID would give me more specificity and shows up right in the layers panel. So just seems to make sense in certain circumstances.

So I tried renaming a section ID to ‘ **#hero-section** ’, and this shows up in the Layers panel. But when I inspect the section in the front end, it still has some random ID applied of ‘ **#comp-kbgaghri** ’. Not only is this less intuitive, but it just seems randomly generated, which makes me wonder if it might change arbitrarily at any point, rendering any custom styles invalid.

- If those IDs don’t get applied to the section or element they’re attached to, what’s the point of them?!? Why would I be able to rename them?!?

NOTE: We are still on the free plan while we build out the site. Could this be the cause?

---

<div class="post-metadata">

**Author:** ![noahlovell](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/noahlovell/32/118920_2.png) [@noahlovell](https://forum.wixstudio.com/u/noahlovell)\
**Post date:** [June 18, 2024, 11:06am UTC](https://forum.wixstudio.com/t/display-rename-ids-in-studio-editor/59956/2 "2024-06-18T11:06:33Z")

</div>

Those IDs are intended for use in Velo and allow for elements to be selected.

For example:

```javascript
let myElement = $w("#myElement");

```

You can read more here - [https://dev.wix.com/docs/velo/api-reference/$w/$w](https://dev.wix.com/docs/velo/api-reference/$w/$w)

In regards to adding CSS to Wix Studio, I’d recommend taking a look at this article which goes into more details - [Studio Editor: About CSS Editing | Help Center | Wix.com](https://support.wix.com/en/article/studio-editor-about-css-editing)

---

<div class="post-metadata">

**Author:** ![L-L](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/l-l/32/82835_2.png) [@L-L](https://forum.wixstudio.com/u/L-L)\
**Post date:** [June 18, 2024, 6:25pm UTC](https://forum.wixstudio.com/t/display-rename-ids-in-studio-editor/59956/3 "2024-06-18T18:25:46Z")

</div>

Hi, thanks for the reply!

That’s too bad that the ID’s are only for javascript reference, and can’t be used for CSS. I think this is a missed opportunity to make things simpler and more intuitive. On many platforms, the ID that javascript would use to target an element would be the same ID that CSS could use, as it would be the rendered ID on the front-end. Seems odd that these ID’s would only be useful in the back-end.

I know I can add similarly-named custom CSS classes to each element, but this is a lot of extra work and seems redundant. Then have to remember to use the ID for JS & class for CSS.

I do have [another question (see here)](https://forum.wixstudio.com/t/css-targeting-text-classes-not-working/60026) regarding not being able to target specific CSS classes on particular elements.

Thanks for the tips. Trying to get up to speed on best-practices for fully customizing & optimizing things in Wix Studio after decades on other platforms…

---

<div class="post-metadata">

**Author:** ![noahlovell](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/noahlovell/32/118920_2.png) [@noahlovell](https://forum.wixstudio.com/u/noahlovell)\
**Post date:** [June 20, 2024, 10:57am UTC](https://forum.wixstudio.com/t/display-rename-ids-in-studio-editor/59956/4 "2024-06-20T10:57:07Z")

</div>

These are great insights - will be happy to share with the team.

My experience is limited to within Wix Studio/Wix 😅 but I tend to find my CSS classes apply to multiple elements, whereas my element IDs are unique for each element for use with javascript.

That being said, I can also see how it might be less intuitive.