# Ignition CSS selectors list

**URL:** <https://forum.inductiveautomation.com/t/ignition-css-selectors-list/52848>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [November 8, 2021, 8:09pm UTC](https://forum.inductiveautomation.com/t/ignition-css-selectors-list/52848 "2021-11-08T20:09:10Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Enrico](https://avatars.discourse-cdn.com/v4/letter/e/e495f1/32.png) [@Enrico](https://forum.inductiveautomation.com/u/Enrico)\
**Post date:** [November 8, 2021, 8:09pm UTC](https://forum.inductiveautomation.com/t/ignition-css-selectors-list/52848/1 "2021-11-08T20:09:10Z")

</div>

Good evening.  
I am trying to make some new themes with the CSS customisation.  
Is there any way to have a list of the selectors that are available?  
For example I would like to make custom label, or specific customisation on flex containers item, but trying with “classic” CSS selectors is not working.

Thanks for help.

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [November 8, 2021, 11:19pm UTC](https://forum.inductiveautomation.com/t/ignition-css-selectors-list/52848/2 "2021-11-08T23:19:05Z")

</div>

Check the CSS files in the active theme to see which selectors you could use. For example, if you’re using the `light` theme, browse to the Ignition installation location and look in the themes directory that corresponds to your theme. You’ll see a bunch of CSS files, this should get you started.

If you want to provide specific examples, such as what “classic” CSS selectors you’re using, that would be helpful!

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 9, 2021, 7:39am UTC](https://forum.inductiveautomation.com/t/ignition-css-selectors-list/52848/3 "2021-11-09T07:39:13Z")

</div>

> [@Enrico](#):
>
> “classic” CSS selectors

css is css so it should all work the same, ignition uses a lot of classes tho

---

<div class="post-metadata">

**Author:** ![Enrico](https://avatars.discourse-cdn.com/v4/letter/e/e495f1/32.png) [@Enrico](https://forum.inductiveautomation.com/u/Enrico)\
**Post date:** [November 9, 2021, 8:47am UTC](https://forum.inductiveautomation.com/t/ignition-css-selectors-list/52848/4 "2021-11-09T08:47:54Z")

</div>

Thanks for the reply. I am sorry I am new with CSS so maybe it’s difficult to me.  
What I am trying to do is that for example using .td {  
…  
}

for table data customization is not working while  
.t{  
…  
}  
Is working…  
Maybe what I am searching for are the css classes that ignition uses, to be able to modify them?

I took the light theme and modified some part of the CSS but I cannot find anything for labels, so I can’t understand how to provide theme styles to them.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 9, 2021, 9:11am UTC](https://forum.inductiveautomation.com/t/ignition-css-selectors-list/52848/5 "2021-11-09T09:11:34Z")

</div>

.td is looking for a class named ‘td’ not the html element td

But ignition doesnt use td’s for tables. nor has a class named like that (or its not relevant to tables)

The best way to find css classes and stuff is to do it with the inspector (in chrome)  
With that you can do live changes to css and classes and see what (doesnt)change

with ctrl+shift+c you can easily find the correct elements by hovering over them

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/5/25fd112b9cd50b6b6a12f2d3fa9d39a5369144d8.png)  
Here you see igntion did make some classes named .t and .tc  
if i add a style there in the inspector i can see it live changing the column so i know where and what to add in the ccs file  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/c/bc8a5481d4fbd056e0ca49ce5e4c50d20e3fdd98.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 9, 2021, 9:19am UTC](https://forum.inductiveautomation.com/t/ignition-css-selectors-list/52848/6 "2021-11-09T09:19:04Z")

</div>

btw you should create a new theme file that inherits light.css and not change the light.css files as these might get overwritten on update.

---

<div class="post-metadata">

**Author:** ![Enrico](https://avatars.discourse-cdn.com/v4/letter/e/e495f1/32.png) [@Enrico](https://forum.inductiveautomation.com/u/Enrico)\
**Post date:** [November 9, 2021, 11:11am UTC](https://forum.inductiveautomation.com/t/ignition-css-selectors-list/52848/7 "2021-11-09T11:11:25Z")

</div>

Thank you so much!!  
You solved my problem! Didn’t known about that function in chrome. I feel really newbie.

Thank you very much.

And yes of course I am creating a new theme inheriting light.css, thank you anyway.
