# Useful CSS Stuff

**URL:** <https://forum.inductiveautomation.com/t/useful-css-stuff/95414>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 2, 2024, 1:58am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414 "2024-09-02T01:58:19Z")\
**Posts on this page:** 1\
**Showing post:** 4

<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:** [September 2, 2024, 9:03am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/4 "2024-09-02T09:03:22Z")

</div>

The browser devtools are your friend.  
Its easy to find elements and from there you can craft selectors.  
You can edit css in the devtools too to see if everything is working before copying the working code to perspective.

Adding in perspective classes given through the designer requires you to add:  
"psc-" in front of the class name.  
And if the class is in a folder the path "/" should become `"\/"`  
example : `.psc-Folder\/NewStyle`

There are also some relativly new css selectors like :has() which are very powerful. Many sources who say its not possible in css, dont known about :has yet. [:has() - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:has)

Also note not all css stuff works in the designer, but does show up correctly in browsers. That is because the designer is behind in chromium version. (And maybe the workstation app too i dont know)

---

_[View the full topic](https://forum.inductiveautomation.com/t/useful-css-stuff/95414)._