Replace :first/last-child with :first/last-of-type in .btn-group

[rinodrummer]

When working in combination with Alpine.js, the most common approach to pagination is using x-for and the usual syntax is the following:

<ul class="btn-group flex justify-center items-center">
    <template x-for="(link, index) in pagination.meta.links" :key="index">
        <li class="btn" x-bind:class="{ 'btn-active': link.active }">
            <a
                x-bind:href="link.url"
                x-on:click.prevent="url = link.url"
                x-html="link.label"
            ></a>
        </li>
    </template>
</ul>

Supposing there are 3 pages and we are on the second page, the resulting HTML will look like this:

<ul class="btn-group flex justify-center items-center">
    <template x-for="(link, index) in pagination.meta.links" :key="index">
        <li class="btn" x-bind:class="{ 'btn-active': link.active }">
            <a
                x-bind:href="link.url"
                x-on:click.prevent="url = link.url"
                x-html="link.label"
            ></a>
        </li>
    </template>
    <li class="btn">
        <a
              href="http://locahost/users"
              x-on:click.prevent="url = link.url"
        >Previous</a>
    </li>
    <li class="btn">
        <a
              href="http://locahost/users?page=1"
              x-on:click.prevent="url = link.url"
        >1</a>
    </li>
    <li class="btn btn-active">
        <a
              href="http://locahost/users?page=2"
              x-on:click.prevent="url = link.url"
        >2</a>
    </li>
    <li class="btn">
        <a
              href="http://locahost/users?page=3"
              x-on:click.prevent="url = link.url"
        >1</a>
    </li>
    <li class="btn">
        <a
              href="http://locahost/users?page=3"
              x-on:click.prevent="url = link.url"
        >Next</a>
    </li>
</ul>

So, resuming, the template is the first child and the first .btn element of the .btn-group is not rounded.

A possible solution could be the replacement of :first-child with :first-of-type and :last-child with :last-of-type (here you can find my implementation on CodePen which compares with the current one).

[vhollo]

This issue is back in v2.28.0–2.30.0

[saadeghi]

Unfortunately using -of-type instead of -child selectors create another issue:

Currently, if you have buttons of different types (a vs button for example), the button styling breaks because the selectors depend on the button type

So this would be a trade-off if we use -child selectors. I think it makes more sense to apply styles to child elements instead of the type of element because the button can be any element. If you're using libraries like alpine that force you to put use <template> elements, it makes more sense to just add all your children to the loop.

I'm sorry if this is inconvenient but I can't find a better way.