In this demo I managed to turn off the background shadow on the Angular Material Accordion using this rule:

.mat-expansion-panel:not([class*='mat-elevation-z']) {
  box-shadow: none !important;
  /* box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%); */
}

I have never seen this type of rule ( [class*= ...] ) before.

Can someone explain what this does?

CodePudding user response：

It's an attribute wildcard selector. it looks for any child element under .mat-expansion-panel that has a class that [class*='mat-elevation-z'] element.

Here are some links that help you more to understand about wildcard selector

1. http://www.impressivewebs.com/css3-attribute-selectors-substring-matching/
2. https://www.w3schools.com/css/css_attribute_selectors.asp#:~:text=CSS [attribute*="value",to be a whole word!

Thanks!