I've been attempting to make the has selector function properly with angular.
Here's my HTML code:
<ul class="check-list no-bullet-points mb-0">
<ng-container *ngFor="let item of checkList.items">
<li class="d-flex flex-row gap-3 align-items-center" [ngClass]="{ 'checklist-item-bigger': bigger }">
<i class="item-icon fa-solid {{ item.icon }}"></i>
<div class="item-text font-weight-bold">{{ item.text }}</div>
</li>
</ng-container>
</ul>
I'm trying to show two rows if there are more than 5 list items present. I could apply a new class using [ngClass], but I believe it should be achievable with pure CSS. This is the selector I'm using:
.check-list:has(li:nth-child(5)) {
display: flex;
justify-content: start;
align-items: center;
flex-wrap: wrap;
li {
width: 50%;
flex-shrink: 0;
}
}
However, this doesn't seem to have any effect. Could ng-container be causing compatibility issues with this selector? I'm currently using Firefox, and as far as I know, Firefox fully supports the :has selector.
The CSS itself works fine when the selector is removed, so I must be making a mistake somewhere.