SCSS Override Value of Property from Class-CodePudding

i have this html

<div style="left: 559px;"></div>

<div style="left: 12px;"></div>

<div style="left: 1109px;"></div>

is there a way in scss that i can override only the class v-menu__content with the left: 12px and change the 12px into 0.5rem !important

these html are autogenerated by veutify under the hood so i have no control of it

CodePudding user response：

You can use the attribute selector, although technically it is not what it is used for, but it can solve your problem in this example. Here you go: .v-menu__content[style*="left: 12px;"] {do your magic}

.v-menu__content[style*="left: 12px;"] {
  color: red;
  left: 0.5rem !important;
}

<div  style="left: 559px;">test</div>
<div  style="left: 12px;">test</div>
<div  style="left: 1109px;">test</div>

CodePudding user response：

If the .v-menu__content elements are in the same parent element you can use an :nth-of-type selector.

.v-menu__content:nth-of-type(2){
  left: 0.5rem !important;
}