How to remove a third party selector?

user_6489012 0
Viewed 449

I imported a third party CSS (which I'm not allowed to modify) into my application. This CSS file is declaring a class name and a selector, e.g.:

.third-party-class{
  color: blue;
}

.third-party-class:last-of-type{
  color: red;
}

My goal is to remove the .third-party-class:last-of-type selector completely by using CSS only. Of course you could just override the .third-party-class:last-of-type selector and copy every property from .third-party-class. But this is really inconvenient if .third-party-class has a lot of properties.

.third-party-class{
  color: blue;
}

.third-party-class:last-of-type{
  color: red;
}

.desired-li{
  color: blue;
}
<div>
Currently:
  <ul>
    <li class="third-party-class">one</li>
    <li class="third-party-class">two</li>
    <li class="third-party-class">three</li>
</ul>

Desired:
  <ul>
    <li class="desired-li">one</li>
    <li class="desired-li">two</li>
    <li class="desired-li">three</li>
  </ul>
</div>

Question

Is it possible to override/remove a CSS selector completely, without redeclaring all properties of the "base" class by using CSS (no JS) only?

css-selectors css html
3 Answers

Since we are dealing with last-of-type and you cannot change the CSS, you can add an extra element that will trigger this selector and hide it (I suppose you are able to adjust the HTML):

.third-party-class {
  color: blue;
}

.third-party-class:last-of-type {
  color: red;
  background:pink;
  font-size:250px;
  opacity:0.9;
  display:flex;
  vertical-align:sub;
  /*doesn't matter what CSS you will have here*/
}

ul li:last-of-type {
  display:none!important;
}
<ul>
  <li class="third-party-class">one</li>
  <li class="third-party-class">two</li>
  <li class="third-party-class">three</li>
  <li></li>
</ul>

user_86203330

I agree with the comment that BenM made to your original question.

But...If the CSS is as simple (only one line) as your fiddle leads me to believe you could just use "!important" on the selector you want to overwrite.

.third-party-class:last-of-type{
    color: blue !important;
 }

That would allow you, on a selector by selector basis (assuming there are more than just color being used), specify what you want the third party code to do.

user_47594150

You could use the [attribute^=value] Selector, it will overide every ellement who starts with "value" so you can make something like this:

.third-party-class{
  background: blue;
 height: 20px;
 width: 20px;
 margin-bottom: 10px;
}

.third-party-class:last-of-type{
  background: red;
}


div[class^="third-party-class"]{
 background: green;
}
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>
<div class="third-party-class"></div>

Sorry if i do not understand it right

user_97192780
Related