How to add styles to angular component? (every second element)-CodePudding

I have a question about adding styles to Angular components. e.g I would like to have every second angular component in a list to have red background-color. How can I make it happen?

I tried a lot of different things - it seems that it is added in HTML but doesn't work.

<ang-component  />
<ang-component  />

I tried setting it in parent component styles

ang-component:nth-child(odd) {
 background-color: red;
}

but it doesn't work. It shows up while inspecting but there is no visible effect

EDIT: Code - to show an example how it looks

<form [formGroup]="form"  (ngSubmit)="onUpdateForm()" >
    <item></item>
    <hr />
    <item></item>
    <item></item>
<hr />
<div id="btn-save-section">
    <button  type="button">Cancel</button>
    <button  type="button">Update</button>
</div>

I want item components to change - so every second should have background color red

CodePudding user response：

ang-component:nth-child(odd) > * {
 background-color: red;
}

because your component root element is probably only a container w 0 width and 0 height