CSS Selector: last-child not working when added with a FOR loop

Question

I'm working ASP.NET MVC with Razor pages. When I add items with a ForEach loop the last-child selector works fine. When I use a For loop the last-child does not work.

This works:

    @foreach (var m in Model.Playlists)
    {
        <tr>
            <td><a href="/PlayLists/ShowTracks?playlistId=@m.id&trackCount=@m.TrackCount&playlistName=@m.Name">@m.Name</a></td>
            <td>@m.TrackCount</td>
        </tr>
    }

This does not work:

    @for (int i = 0; i < Model.TrackList.Count; i++)
    {
        <tr>
           <td>@Html.CheckBoxFor(x => x.TrackList[i].IsSelected)</td>
            <td>@Model.TrackList[i].Name)</td>
            <td>@Model.TrackList[i].Artist</td>
            <td>@Model.TrackList[i].Album</td>
         </tr>

            @Html.HiddenFor(x => x.TrackList[i].Artist)
            @Html.HiddenFor(x => x.TrackList[i].id)
            @Html.HiddenFor(x => x.TrackList[i].Album)
            @Html.HiddenFor(x => x.TrackList[i].Name)
        }

As a work around I can add this:

    @if (i == (Model.TrackList.Count - 1))
    {
        <td class="lastright">@Model.TrackList[i].Album</td>
    }
    else
    {
        <td>@Model.TrackList[i].Album</td>
    }

And then add my style to class. Just curious why it doesn't work as expected. The DOM explorer does not show any additional elements.

Also here is the CSS:

    .tracksTable tbody tr:last-child td:first-child {
        border-radius: 0 0 0 16px;
    }

    .tracksTable tbody tr:last-child td:last-child {
        border-radius: 0 0 16px 0;
    }

Please review [Ask] and modify your question to tell us what you mean by "does not work". — jwdonahue, Nov 21 '17 at 23:19
Your generating invalid html for a start (and `` cannot be a child element of a `` element - your hidden elements need to be inside a `` element) — , Nov 21 '17 at 23:22
to #define "does not work" based on the posted CSS the expected result is that the first-child and last-child should have rounded corners. I'll have to investigate the why an input isn't allowed inside a tbody. It is working fine. — xsoftie, Nov 22 '17 at 18:42
@Ashiquzzaman, That is still invalid (the only valid child for a `` is a `` or ``) - the inputs must be inside a `` — , Nov 22 '17 at 22:37
[Which DOM elements can be child of tr?](https://stackoverflow.com/questions/12634715/which-dom-elements-can-be-child-of-tr) — , Nov 22 '17 at 22:42

score 0 · Answer 1 · edited Nov 22 '17 at 22:39

Pulling the @Html.HiddenFor() inside the a <td> block resolved the issue. I noticed if there is anything between the final </td> and the last </tr> it will fail to find the last <td> as a last-child.

@for (int i = 0; i < Model.TrackList.Count; i++)
{
    <tr>
        <td>@Html.CheckBoxFor(x => x.TrackList[i].IsSelected)</td>
        <td>
            @Model.TrackList[i].Name)
            @Html.HiddenFor(x => x.TrackList[i].Name)
        </td>
        <td>
            @Model.TrackList[i].Artist
            @Html.HiddenFor(x => x.TrackList[i].Artist)
        </td>
        <td>
            @Model.TrackList[i].Album
            @Html.HiddenFor(x => x.TrackList[i].id)
            @Html.HiddenFor(x => x.TrackList[i].Album)
        </td>
    </tr>
}

CSS Selector: last-child not working when added with a FOR loop

1 Answers1