How to apply css to parent using child selector -- with css or angular 2

Question

How to apply css properties using child selector ( mat-checkbox-checked ), Need to apply properties to its parent td and siblings... No need to apply for the second tr and its childs. Using only css or angular 2 or material or javascript ..! without using jQuery

<table>
      <tbody>
        <!-- apply styles to this row -->
        <tr>
          <td>
            <mat-checkbox class="mat-checkbox-checked"></mat-checkbox>
          </td>
          <td>data 1</td>
          <td>data 2</td>
          <td>data 3</td>
          <td>data 4</td>
        </tr>
      <!-- No need to apply styles to this row -->
        <tr>
          <td>
            <mat-checkbox class="mat-checkbox"></mat-checkbox>
          </td>
          <td>data 1</td>
          <td>data 2</td>
          <td>data 3</td>
          <td>data 4</td>
        </tr>
      </tbody>
    </table>

Answer 1

if you want to select the first row of this table, you can do something like this:

tbody tr:first-child  {
    background: red;
}

Hope this would help.

Answer 2

Assign some models to the checkboxes as follows

  <mat-checkbox class="mat-checkbox" [(ngModel)]=“firstCb”></mat-checkbox>
  <mat-checkbox class="mat-checkbox" [(ngModel)]=“secondCb”></mat-checkbox>

And use ngClass on trs as follows

<tr [ngClass]=“{'selected' : firstCb}”>

When user checks the first checkbox, then it’s parent tr will have selected as a class. Then you can apply any style you want like this

tr.selected { color: blue; }

Answer 3

There is no parent selector in css. But if you using angular 2+, you can always inject ElementRef for DOM manupulation.

constructor(private elementRef: ElementRef){}

ngAfterViewInit(){

   // rootElement is native html element, therefore native methods and properties of html element and node is available.

   const rootElement = this.elementRef.nativeElement; 

   // get parent of checkbox with class of 'mat-checkbox-checked'
   const parentNode = rootElement.querySelector('.mat-checkbox-checked').parentNode;
   // and change its background color
   parentNode.style.backgroundColor = '#f1f1f1';
}