angularangular-material

How can I make it so only this `mat-card-subtitle` in this above header gets color red?

I learn Angular material and I have this code

  <mat-card-header>
    <mat-card-title>Search for books</mat-card-title>
    <mat-card-subtitle>press enter on search</mat-card-subtitle>
  </mat-card-header>

and this css

.mat-card-subtitle {
  font-size: 10px;
  color: red;
}

The problem is now all <mat-card-subtitle> gets the color red. How can I make it so only the mat-card-subtitle in this above header gets color red?

Solution

  • Add a custom CSS class in HTML

      <mat-card-header>
    <mat-card-title>Search for books</mat-card-title>
    <mat-card-subtitle class="red-text">press enter on search</mat-card-subtitle>
  </mat-card-header>

    CSS

    .red-text {
  font-size: 10px;
  color: red !important;
  text-align: center !important;
}