'SCSS Override Value of Property from Class

i have this html

<div class="v-menu__content" style="left: 559px;"></div>

<div class="v-menu__content" style="left: 12px;"></div>

<div class="v-menu__content" 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

csssassvuetify.js


Solution 1:[1]

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 class="v-menu__content" style="left: 559px;">test</div>
<div class="v-menu__content" style="left: 12px;">test</div>
<div class="v-menu__content" style="left: 1109px;">test</div>

Solution 2:[2]

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;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 zeljkoDe
Solution 2 cam

Related Questions