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

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)

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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)