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 )
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.
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; }
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)
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.
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.