Disable SCSS last-of-type-CodePudding

I create a page in typescript. My page has the .html , the .ts and the .scss

So when I run my website and look inside the "inspect page" of google, my table has code inside : td.mat-cell:last-of-type with padding-right: 24px

I don't have nothing in my .SCSS about this.

So How I can remove this padding right ? I try

td.mat-cell{
  padding-left: 0px;
  padding-right: 0px;
}

But it doesn't work.

thanks

CodePudding user response：

With your example, you're styling td.mat-cell {} but that's less specific than the td.mat-cell:last-of-type {} selector.

Try this:

td.mat-cell:last-of-type {
  padding-left: 0px;
  padding-right: 0px;
}

Or, if you'd like to format it a bit to leverage SCSS nesting (this is purely a stylistic preference):

td.mat-cell {
  &:last-of-type {
    padding-left: 0px;
    padding-right: 0px;
  }
}