Angular2 apply css based on component selector name

Question

I'm using ngx-bootstrap datepicker which has daypicker, monthpicker and yearpicker as inner component. I want to apply css to a table which is present inside daypicker.

<custom-datepicker>

<datepicker> //ngx-bootstrap datepicker component
    <daypicker>
        <table>
            //rows, want to apply some css to only this table
        </table>
    </daypicker>
    <monthpicker>
        <table>
            //rows
        </table>
    </monthpicker>
    <yearpicker>
        <table>
            //rows
        </table>
    </yearpicker>
</datepicker>

</customdatepicker>

CustomDatePickerComponent.ts

@Component({
    selector: 'custom-datepicker',
    templateUrl: 'custom-datepicker-component.html',
    styleUrls: ['custom-datepicker-component.scss'],
})

export class CustomDatePickerComponent {

}

custom-datepicker-component.html

<datepicker></datepicker>

custom-datepicker-component.scss

//I want to apply this css to a table which is inside daypicker. As of now it's applying to all the tables
table {
    border: 1px solid lightgrey;
}

Answer 1

You can add a css class to your table:

<datepicker> //ngx-bootstrap datepicker component
    <daypicker>
        <table class="new-class">
            //rows, want to apply some css to only this table
        </table>
    </daypicker>
...

and then use the regular class selector:

.new-class {
    // your styling
}

Alternatively add a class to your datepicker or daypicker like so:

<datepicker class="new-class">
...

And use descendant selector:

.new-class table {
    // your styling
}

Answer 2

it's as simple as this, using component name it's self we can apply css

custom-datepicker-component.scss

daypicker {
  table {
    border: 1px solid red;
  }
}

Answer 3

You can try this :

datepicker > daypicker > table {
    border: 1px solid lightgrey;
}