I am using prev and next on my site chained with with. First page shows next button and last page shows previous button only. I want to style these buttons differently on these pages. Is it possible to target these excluding other pages where they appear together?

[image] tyco: paginator and paginate have that ability, It seems like you’re referring to the HasNext and HasPrev methods. You can do the same thing with the Next and Prev methods on a page collection. ▶ layouts/posts/list.html ▶ layouts/posts/single.html git clone --single-branch -b hugo-forum…

I am not 100% sure I get what you want, so here is a more verbose sample: page 1: prev = nothing, next = page 2 page 2: prev = page 1, next = page 3 page 3: prev = page 2, next = nothing You want to display the navigation on page 1 and page 3 different? I would use 2 approaches based on what exac…

[image] davidsneighbour: Add your layout for the prev/next navigation and we might be able to add Here you go {{- $pages := (append .CurrentSection.Pages.ByWeight (slice .CurrentSection)).Reverse }} {{ with $pages.Prev . }} <a href="{{ .RelPermalink }}">Previous</a> {{ end }} {{ with $pa…

You could use classes like so a.previous + a.next { border-left: ...; } not a Hugo issue, though – HTML and CSS only.

I’m using this code to style Previous and Next differently when each is at the end of its range: <div class="flex justify-center mt-8"> <ul class="inline-flex -space-x-px text-base h-10 list-none"> {{ with $pages.Prev . }} <li> <a href="{{ .RelPermalink }}" aria-label="P…

That looks like Tailwind :slight_smile: You want to have the PREV link be start/left and NEXT be end/right. <li class="self-start"> and <li class="self-end"> for PREV and NEXT in both (with/else) should do the trick. I am not sure about the “inline-flex” in the UL - I would get rid of the UL at al…

Yes, it’s Tailwind plus Flowbite—my first experiment with each.

I find all these classes weird. It’s like writing CSS disguised in classes. Quite repetitive, too.

In my site, first page shows only the next button and last page the previous button. So, hence the need to target those pages individually. paginator and paginate have that ability, hence the question about prev-next.

[image] jmooring: It seems like you’re referring to the HasNext and HasPrev methods. True! Thank you @jmooring . That is just what I was looking for.

Can the first and last pages in next and prev be targeted?

support

jmooring March 30, 2025, 3:28pm 12

Great. It’s a bit of brain-bender due to the next/prev reversal, but that’s a problem for another day.

Topic		Replies	Views
.Prev & .Next Returning Opposite Of Expected support	1	894	February 11, 2016
Can I set next and prev in front matter? support	8	536	October 3, 2024
Question regarding Next Prev navigation support	6	5617	May 7, 2020
Wrap-around with .PrevInSection / .NextInSection? support	5	813	May 20, 2020
Previous and Next buttons (Doks Theme) Using Themes	5	217	July 15, 2025

Can the first and last pages in next and prev be targeted?

Related topics