#:first-child wont work

2 messages · Page 1 of 1 (latest)

foggy lantern
#

Hi i'm trying to add tailwind classes to the first td that has the class admin-data but for some reason it's not working. When i removed the :first-child is working fine. Is this some issue with how the rendering works?

html component

<tbody>
                    <tr *ngFor="let observableItem of observableList" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                        <td class="w-4 p-4">
                            <div class="flex items-center">
                                <input id="checkbox-table-search-1" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                                <label for="checkbox-table-search-1" class="sr-only">checkbox</label>
                            </div>
                        </td>
                        <ng-container *ngFor="let column of columns">
                            <td class="admin-data px-6 py-4">
                                {{ observableItem[column.key] }}
                            </td>
                        </ng-container>
...

and this is the css:

tr > td.admin-data:first-child {
    @apply px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white;
}

When i remove first-child it works on all tds with class "admin-data" When i have first-child nothing happens and it doesn't render at all.

latent ore
#

I think the issue here is that the first child selector means exactly that: the first child. Your style would apply if the first td under the tr had the admin-data class, but since the first child never has that class, it never applies.
There is a way to get a "first" boolean when using *ngFor, I would instead use that to apply a special class to the first one in that loop, like [class.first]="first", then use .first in place of :first-child