CODEWITHSUNDEEP
cssangularsass
user7659932
user7659932

Reputation: 169

not of nth child selector not working in sass

I am trying to apply certain styles to all items in list besides the first child. I think I set up the sass correctly, however the style is not being applied currently.

html 

  <div class="list">
                    <div *ngFor="let item of data; index as i; first as isFirst; last as isLast"class="list-item">

                        <input class="radio" name="radio" type="radio" />
                        <label for="radio1">Buttom</label>
                    </div>

        </div>

sass

 .list label:not(:nth-of-type(1))::before{
  background-color:blue;
}

Upvotes: 0

Views: 773

Answers (2)

daroldev
daroldev

Reputation: 131

If you mean selecting all .list-item except the first one, the CSS will be like:

.list-item:not(:nth-of-type(1))::before {
    content: '';
    background-color:blue;
}

Since you are using pseudo element ::before, you may want to use content: '' to specify some content, otherwise background-color will has no effect.

Upvotes: 0

Berat Akg&#252;l
Berat Akg&#252;l

Reputation: 152

You can achieve this doing by all the items bg blue and the first one's bg to white or whatever your background is.

<div class="list">
<div *ngFor="let item of data; let i=index"  [class.first]="i === 0">
    <input class="radio" name="radio" type="radio" />
<label for="radio1" class="lbl">{{item.name}}</label>

and your css should be like this:

label {
  background-color:blue;
}
.first label {
  background-color: #fff;
}

I assume your data is like that:

 data = [
    {name: "car"},
    {name: "truck"},
    {name: "bike"}
  ]

This is working example

Upvotes: 1

Related Questions