CSS :first and :last-of-sequence pseudo-selectors like?

Question

I need select some nodes in sequences via CSS. Is basically something like .button:first-of-sequence. Currently it doesn't exists, so I'm searching for an alternative method. See this case:

<div class="paginator-widget">
    <div class="page">First</div>
    <div class="page">Previous</div>
    <div class="separator"></div>
    <div class="page">1</div>
    <div class="page">2</div>
    <div class="page">3</div>
    <div class="page">4</div>
    <div class="separator"></div>
    <div class="page">Next</div>
    <div class="page">Last</div>
</div>

It's a paginator, and I need style each group of .page turning the first-of-sequence left border rounded, the middle-sequence (default) without border rounded and the last-of-sequence right border rounded (note that .separator breaks the sequences). Something like:

.page { background-color: black; color: white; }
.page:first-of-sequence { border-radius: 5px 0 0 5px; }
.page:last-of-sequence { border-radius: 0 5px 5px 0; }

Is it possible with pure CSS, or I need specify a new class to match this specific elements? (like this example)

score 4 · Answer 1 · edited May 23 '17 at 11:54

You can use sibling combinators to simulate :first-of-sequence, but not :last-of-sequence.

For example, even if the only elements in your parent element were .page and .separator, you could match .page:first-of-sequence using .page:first-child, .separator + .page, but you wouldn't be able to select .page elements directly preceding a .separator. That's because CSS doesn't provide a previous sibling selector.

This is as far as you could go in replicating those selectors with pure CSS:

.page { background-color: black; color: white; }
.page:first-child, .separator + .page { border-radius: 5px 0 0 5px; }
.page:last-child { border-radius: 0 5px 5px 0; }

You can see in this example that the page 4 link doesn't have rounded corners like it's supposed to.

However, in your specific case, if you can rely on the first, second, second last and last elements being your first-previous and next-last pagination links, you could simply use combinations of :nth-child() and :nth-last-child():

.page { background-color: black; color: white; }

/* [First], [Next], [1] */
.page:first-child, .page:nth-last-child(2), .page:nth-child(4) { border-radius: 5px 0 0 5px; }

/* [Last], [Previous], [4] (or whatever ends up being the last page number) */
.page:last-child, .page:nth-child(2), .page:nth-last-child(4) { border-radius: 0 5px 5px 0; }

Notes:

:nth-child(3) and :nth-last-child(3) are .separator elements, so we skip those and count to 4 instead.
I think Chrome has a bug with :nth-last-child() which may force you to have to use :nth-last-of-type() instead, but I don't know if that's been fixed yet.

If all of this is too complex, the simplest alternative would be to group your end links (first-previous, next-last) and your page number links into their own parent elements separately if possible, which makes it easy for you to just target .page:first-child and .page:last-child, as Lochlan's answer shows.

score 4 · Accepted Answer · answered Jan 04 '14 at 05:00

Nothing like that exists, but you can use containing elements to achieve the same result.

HTML:

<div class="paginator-widget">
    <section>
        <div class="page">First</div>
        <div class="page">Previous</div>
    </section>
    <section>
        <div class="page">1</div>
        <div class="page">2</div>
        <div class="page">3</div>
        <div class="page">4</div>
    </section>
    <section>
        <div class="page">Next</div>
        <div class="page">Last</div>
    </section>
</div>

CSS:

.page { background-color: black; color: white; }
section div:first-child { border-radius: 5px 0 0 5px; }
section div:last-child { border-radius: 0 5px 5px 0; }

jsFiddle Link

I guess that it solve my problem and is a good general solution. Thanks! — David Rodrigues, Jan 05 '14 at 16:58

Bindiya Patoliya · Answer 3 · 2014-01-04T05:06:14.750

0

Use like this

.page:first-child { border-radius: 5px 0 0 5px; }
.page:last-child { border-radius: 0 5px 5px 0; }

and verify it with compatibility chart.

:first-child is supported IE9 properly, and IE7 and IE8 sort of (see chart).

:last-child is supported by IE9+ only.

Both of them are supported well by the good browsers.

You can also use nth-child(even) AND nth-child(odd)

edited Jan 04 '14 at 05:06

answered Jan 04 '14 at 04:54

Bindiya Patoliya

2,726
1
16
15

score 0 · Answer 4 · answered Jan 04 '14 at 04:58

I think you can use a pseudo selector available in css3 for first and last elements. You can do something like this:

.page:first-child {
  border-radius: 5px 0 0 5px;
}
.page:last-child {
   border-radius: 0 5px 5px 0;
}

And the nth-child pseudo selector for select elements using the index. for example:

.page:nth-child(2){
 /* your custom style for second element */
}

Keep in mind, all css3 pseudo selectors don't work in old browsers, if you want compatibility, you should use classes for your particular elements.

score 0 · Answer 5 · answered Jan 04 '14 at 05:06

you can do this by :first-child, :last-child, :nth-child

.paginator-widget div.page:first-child, 
.paginator-widget div.page:nth-child(4), 
.paginator-widget div.page:nth-child(9){
    padding-left: 15px;
    border-radius: 10px 0 0 10px;
}

.paginator-widget div.page:last-child, 
.paginator-widget div.page:nth-child(2), 
.paginator-widget div.page:nth-child(7){
    border-radius: 0 10px 10px 0;    
    padding-right: 15px;
}

updated jsFiddle File

CSS :first and :last-of-sequence pseudo-selectors like?

5 Answers5