CODEWITHSUNDEEP
htmlcss
Greggz
Greggz

Reputation: 1799

CSS Selector fails to change style

I have this css code for an Angular mat-group-button

mat-button-toggle-group mat-button-toggle button div.mat-button-toggle-label-content {    
  line-height: 0px;
}

This is the generated code

<mat-button-toggle-group _ngcontent-sah-c203="" role="group" name="os_attribution" aria-label="Atribuição de OS"
  class="mat-button-toggle-group mat-button-toggle-group-appearance-standard" ng-reflect-name="os_attribution"
  aria-disabled="false">
  <mat-button-toggle _ngcontent-sah-c203="" value="anyone"
    class="mat-button-toggle mat-button-toggle-appearance-standard" ng-reflect-value="anyone" tabindex="-1"
    id="mat-button-toggle-2"><button type="button" class="mat-button-toggle-button mat-focus-indicator"
      id="mat-button-toggle-2-button" tabindex="0" aria-pressed="false" name="os_attribution">
      <div class="mat-button-toggle-label-content">
        <mat-icon _ngcontent-sah-c203="" role="img" class="mat-icon notranslate material-icons mat-icon-no-color"
          aria-hidden="true">assignment_turned_in</mat-icon>
          Atribuídas 
      </div>
    </button>
   </mat-button-toggle>
</mat-button-toggle-group>

I am able to change the style of the elements until this selection

mat-button-toggle-group mat-button-toggle { 
  background: red;
}

But after that, when I reach button, nothing I've tried works

What's happening ?

Upvotes: 1

Views: 106

Answers (3)

Keimeno
Keimeno

Reputation: 2644

I suppose you're using angular right? In this case the problem is about view encapsulation. If you check the generated styles, you notice that they are scoped to the parent components assigned ID. To opt out of the view encapsulation you can use the ::ng-deep selector.

::ng-deep mat-button-toggle-group mat-button-toggle button div.mat-button-toggle-label-content {    
  line-height: 0px;
}

Upvotes: 1

Sean Stopnik
Sean Stopnik

Reputation: 1868

mat-button-toggle is missing the period. Needs to be .mat-button-toggle.

Upvotes: 0

cseitz
cseitz

Reputation: 1226

You forgot to use the CSS class selector .!

.mat-button-toggle-group .mat-button-toggle { 
  background: red;
}

If any of those are angular components, you cannot be sure that they will build into the same HTML tag names. Its better to use classes if it involves non-standard tag names (stuff that isn't button, div, span, etc).

Upvotes: 1

Related Questions