Add classes to the page numbers in query loop pagination

A simpler example:

You have the class:

.ca-btn–primary {
background-colour: var(–brand-secondary-2);
}

.ca-btn–primary:is(:hover,:focus) {
background-colour: var(–brand-secondary-1);
}

If you apply it to the ‘next’ or ‘previous’ block, it works fine.

But if you apply it to the ‘page numbers’ block, all the page numbers will change colour at once when you hover over any of them, instead of changing individually when you hover over each one.

In other words, it goes from this:

<nav class="ca-btn--primary gb-query-page-numbers-48722d9c">
<a class="page-numbers" href="?cst">1</a>
<span aria-current=‘page’ class="page-numbers current">2</span>
<a class="page-numbers" href="?query-34317618-page=3&cst">3</a></nav>

to this:

<nav class="gb-query-page-numbers-48722d9c">
<a class="ca-btn--primary page-numbers" href="?cst">1</a>
<span aria-current=‘page’ class="page-numbers current">2</span>
<a class="ca-btn--primary page-numbers" href="?query-34317618-page=3&cst">3</a></nav>

Thank you for your reply, but please read it again and note that the question is not ‘how to add styles’, but ‘how to add a class’.

Thank you.

PS: With classes, you don’t have to define styles over and over again. Furthermore, if the style is updated later on, it is easier to modify a class than to modify all the styles individually again.

Thank you for responding, but it seems we are not understanding each other.

With the method that I showed you, you apply the style once. For example, if you style the Hovered Page Number selector, each page number on hover will be affected.

With that method, every time you insert a new query loop, you have to reassign the styles. Furthermore, if you want that style to be consistent throughout the website, for example, if you want it to change the colour or shape, you will have to edit all the query loops in the website.

To achieve consistency, classes are used.

You can select the Page Numbers block and assign a class to it, eg: custom-style.

If, as usual, you have a class to style all the buttons on your website, for example:

.ca-btn–primary {
background-colour: var(–brand-secondary-2);
}

.ca-btn–primary:is(:hover,:focus) {
background-colour: var(–brand-secondary-1);
}

So, you want that style to also apply to the pagination buttons…

But as I mentioned before, if you assign the class to the ‘Page Numbers’ block, the class affects the block as a whole, not the numbers individually, and when you do, for example, ‘on mouse over’, all the page numbers change colour together, not individually:

https://drive.google.com/file/d/1_XML_XuNhVv78NT1LkQH6qyJAQcBm-vZ/view?usp=sharing

the question is: how to add a class that affects to all the “Hovered Page Number” in the website.

Thanks

Thank you for correcting the code, but obviously it was just an example, as I told you.

The class includes background colours, borders, rounding, shadow effects, transform, transition, etc. In other words, the typical elements for defining the style of buttons on a website.

For EXAMPLE:

.btn-example {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  padding: .75rem 1.1rem;
  min-height: 44px;

  font: 600 0.95rem/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .2px;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  color: #ffffff;
  background: #3b82f6;

  border: 1px solid rgba(37, 99, 235, .55);
  border-radius: 14px;

  box-shadow:
    0 10px 22px rgba(2, 6, 23, .10),
    0 2px 6px rgba(2, 6, 23, .08),
    inset 0 1px 0 rgba(255, 255, 255, .18);

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    filter 220ms ease;

  will-change: transform;
  cursor: pointer;

  position: relative;
  overflow: hidden;
}

.btn-example::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120px 60px at 20% 0%,
      rgba(255, 255, 255, .35),
      rgba(255, 255, 255, 0) 60%);
  opacity: .9;
  pointer-events: none;
}

.btn-example:hover {
  transform: translateY(-2px);
  background: #2563eb;
  border-color: rgba(29, 78, 216, .75);
  box-shadow:
    0 14px 30px rgba(2, 6, 23, .14),
    0 3px 10px rgba(2, 6, 23, .10),
    inset 0 1px 0 rgba(255, 255, 255, .18);
  filter: saturate(1.05);
}

.btn-example:active {
  transform: translateY(0px) scale(0.99);
  box-shadow:
    0 8px 16px rgba(2, 6, 23, .12),
    0 2px 6px rgba(2, 6, 23, .10),
    inset 0 2px 8px rgba(2, 6, 23, .18);
}

.btn-example:focus-visible {
  outline: 3px solid rgba(59, 130, 246, .55);
  outline-offset: 3px;
}

.btn-example:disabled,
.btn-example[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

But the content of the class is not relevant.

And by the way, –brand-secondary-1 is perfectly valid with a single dash (using two dashes is just a convention that has no effect). Still, thank you very much for taking the time to try to correct it.

In any case, you are trying to create a class that already exists and that class is page-numbers. To target all page-numbers classes in all query loops on the page, you can be more specific, in case there could be other instances of the page-numbers class outside of a query loop in the future.

Sorry, It seems you’re still not reading the messages carefully… but never mind, I’ll repeat it again:

The class for styling buttons doesn’t exist, which is why it’s being created to apply styling to all the buttons on the website.

In the following screencast, I am using this class to affect all hover states of the page numbers for two query loops on the same page, using the following CSS.

I really appreciate all the information you are giving me about the content of the pagination, its classes, how to apply styles, selectors, etc., but that is not what I am asking.

The question is:

How can I apply a class (the one I use for the buttons on the website) to the buttons on the query loop pagination?

I hope that clarifies the issue.

Thank you.

Okay, that would work.

Although it’s a bit surprising that Generateblock (which allows you to do a thousand things in CSS styles!) doesn’t allow you to add classes to page numbers…

Thank you

From my point of view, I find it very limiting that there is only one block called ‘page numbers’ and that you have to play around with selectors.

It’s as if in the query loop you could only assign classes to the entire ‘looper’ and not to the ‘loop item’…

Even so, GP and GB are the best there is.