CSS: Apply CSS Style to Everything except Material Angular

Admin 1
Viewed 545

How do I apply a CSS Style (justify-content: center or box-sizing: border-box to All child and grandchild elements, except anything thats Material and starts with <mat? Is there an easy to way to text search in CSS/SCSS?

We will literally have 500+ elements, need to effectively apply this. Noticed that going into grandchildren inner-elements of Material, and applying border-box or center can ruin its display .

Is there a mat keyword search I can apply? There are numerous mat div elements, mat-input, mat-select, mat-tab, etc

Trying to apply the css starts-with selector,

https://www.w3schools.com/css/css_attribute_selectors.asp

.container *not(%.mat) {
    box-sizing: border-box
}


<div class="container">
  <div class="document-holder">
    <div class>error_outline</div>
    <mat-input><mat-input>
angular-material angular sass css html
6 Answers
.container *:not([class^="mat"]) {
    background: red;
}

That's the code you might be searching for.

[class^="mat"] will match to any element which has a class starting with mat.

[class*="mat"] will match to any element having mat anywhere in the class name.

Use either of them according to your situation.

user_51493270

I think you can try to reset it afterwards.

You can use your selector

.container * {
  display:flex;
}

and after that add the previous value for mat-input

.container * {
  display:flex;
}
.mat-input {
  display:flex; /* or whatever it was previously */
}
user_23937890

Not the exact solution you are looking for, and assuming you have different elements starting with "mat", not only mat-input, I would add a class to all of them, and use the :not keyword. Something like:

.container *:not(.mat) {
    display:flex;
}


<div class="container">
  <div class="document-holder">
    <div class>error_outline</div>
    <mat-input class="mat"><mat-input>

Something visual can be seen in this jsfiddle.

If you only have a low number of "mat" elements, you can also use the :not keyword several times, something like:

.container *:not(mat-input):not(mat-output) {
    display:flex;
}


<div class="container">
  <div class="document-holder">
    <div class>error_outline</div>
    <mat-input><mat-input>
    <mat-output></mat-output>
user_53598180

Well, what you want is a really really bad way to workaround things since it makes your stylings hard to maintain and may lead to unexpected issues, but hey, you can use this css to set box-sizing property to all elements except the ones starts with mat-.

.container *:not([class^="mat-"]) {
  box-sizing: border-box;
}
user_3020030

As you asked for SCSS solution. In this example I've used SASS List and @each

$matList: input, select, tab; /* list of `mat-`s */
$notList: ""; /* empty variable */

/* adding :not() statmant for each $matList item */
@each $not in $matList {
  $notList: $notList + ':not(mat-#{$not})';
}

/* gets the result of $notList */
.container *#{$notList} {
  box-sizing: border-box;
}

Anyway, you still have to insert the list of mat- tags (only part after "-") in $matList, but in much easier form. Otherwise you will have to use JavaScript to get the list of all map- elements.

After compile you will get

.container *:not(mat-input):not(mat-select):not(mat-tab) {
  box-sizing:border-box;
}
user_31871270 
.container *:not([class^="mat-"]),
.container *:not([class*=" mat-"]) {
    background: red;
}

This will match all elements with a class list beginning with "mat-", as well as elements with a class list containing " mat-". That space is important to avoid accidentally targetting a "format-" class, for instance.

user_27757260
Related