0

I'm using UI Library(Vuetify) and this is the code it has:

 .sample[data-2] {
       color:red;
 }

and I want to overwrite all the elements having .sample classes like this:

   .sample {
        color:blue;
   }

If i use '!important' then it surely works, but I want better solution to overwrite .sample[blabla] class.

I've tried .sample[*], .sample[] ... it didn't work

TylerH
  • 20,799
  • 66
  • 75
  • 101
Harnsle Lee
  • 5
  • 1
  • If it comes after the vuetify code in the css, it should do that. Also, why is `!important` not a valid possibility for you? – Geshode Sep 15 '22 at 05:00
  • @Geshode it is not true that if it comes after the vuetify code it should do that. The vuetify setting has higher specificity - see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity for more information. A problem with !important is that it will take precedence over other settings which may be wanted. – A Haworth Sep 15 '22 at 06:06

1 Answers1

0

You can increase the specificity of your CSS by including :not pseudo class with a # id name.

The id name needs to be one not used elsewhere.

div {
  margin: 10px;
}

.sample[data-2] {
  color: red;
}

.sample:not(#nonExistentId) {
  color: blue;
}
<h2>All these lines should be blue</h2>
<div class="sample">a div with class sample</div>
<div class="sample" data-2>a div with class sample and attribute data-2</div>
<div class="sample" anyoldattribute>a div with class sample and any old atrribute</div>

See MDN for a fuller explanation.

In particular if you need to support older browser versions you could use combinations of :is, :matches and so on.

A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • This is not a good approach. Instead, simply use the same selector you need to overwrite and make sure your CSS is loaded after the CSS you need to modify. – connexo Sep 15 '22 at 14:57
  • @connexo - yes agree it is hacky, but does work (and comes from MDN!) and is not too difficult to read/understand. – A Haworth Sep 15 '22 at 14:59