# Advanced Stylesheet: Class in class

**URL:** <https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [August 7, 2023, 8:00am UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505 "2023-08-07T08:00:36Z")\
**Posts on this page:** 1\
**Showing post:** 13

<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:** [August 11, 2023, 8:06am UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/13 "2023-08-11T08:06:56Z")

</div>

Like i said it wont be an easy task, since the menu's seem to be scripted as "containts" and not as flex.  
so you'll might have to change that in css...

But a **very very new** (so it might not work on all devices (works on chrome105+)) css selector is :has()  
these are some selectors which you might be able to use

```auto
.client-root:has(.docked-view-left .psc-leftMenuOpened) > .center-column.flex-col{
   padding-left:300px !important;
}

```

you might have to check the interaction between all the other docks idk, they have a scripted position so idk how this will affect them

```auto
.client-root:has(.docked-view-left .psc-leftMenuOpened) > .center-column.flex-col .docked-view-top{
   
}

```

when you found something post the solution 😉

---

_[View the full topic](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505)._