Targeting One Element Among Many Identical Buttons Using Attribute Selectors

  • howto

Targeting One Element Among Many Identical Buttons Using Attribute Selectors (Pluro Custom JS/CSS)

Why this problem exists

Modern websites often reuse the same CSS classes across multiple buttons and links for consistent styling (e.g., .hero__button.hero__button--primary). That’s great for design systems—but it becomes a challenge when you need to apply an accessibility fix (like updating an aria-label) to only one specific element.

If you update all elements by class, you risk:

  • Breaking accessibility labels site-wide

  • Changing behavior or styling unexpectedly

  • Creating regressions that are hard to debug

The solution is to use a selector that stays narrow and stable, combining the shared class with a unique attribute such as href, aria-label, or a container scope.

The safest approach: class + unique href

If a specific button points to a unique URL, you can target it precisely with an attribute selector:

(function () {
// Target ONLY the button with this exact href
const selector =
'a.hero__button.hero__button--primary[href="/collections/%D7%9E%D7%96%D7%A8%D7%A0%D7%99-%D7%9E%D7%9C%D7%95%D7%A0%D7%95%D7%AA-%D7%94%D7%99%D7%95%D7%A7%D7%A8%D7%94"]';

const btn = document.querySelector(selector);
if (!btn) return;

// Update aria-label ONLY for this element
btn.setAttribute("aria-label", "Shlomi");
})();

Why this is safe

  • The class ensures you’re still matching the correct component type.

  • The href makes the selector unique, so other buttons with the same classes won’t be affected.

Important detail: In your message you wrote hero_button, but your HTML shows hero__button.
CSS selectors must match exactly (including underscores).

Alternative targeting strategies

Sometimes href isn’t stable or isn’t unique. Here are other options:

1) Target by aria-label (only if it’s unique)

const btn = document.querySelector(
'a.hero__button.hero__button--primary[aria-label="למזרני מלונות היוקרה שלנו"]'
);

2) Target by container scope (preferred when you have a unique section)

If the button is inside a unique hero section:

const hero = document.querySelector(".homepage-hero"); // example container
const btn = hero?.querySelector('a.hero__button.hero__button--primary');

3) Target by visible text (least stable)

Text changes with marketing edits, translations, or A/B tests:

const btn = Array.from(document.querySelectorAll('a.hero__button.hero__button--primary'))
.find(a => a.textContent.trim().includes("מלונות היוקרה"));

Accessibility note: what should an aria-label contain?

aria-label should provide a clear purpose (especially for screen reader users).
A label like "Shlomi" may not communicate what the link does.

A more accessible pattern is:

  • “Shlomi — Luxury Hotel Mattresses Collection”

  • or in Hebrew: “shlomi-example”

Example:

btn.setAttribute("aria-label", "Shlomi — Luxury Hotel Mattresses Collection");

Using this approach in Pluro

When applying fixes via Pluro Custom JS/CSS:

  1. Keep selectors tight (class + unique attribute).

  2. Wrap JS in an IIFE ((function(){...})();) to avoid global pollution.

  3. Add null guards (if (!btn) return;) so the fix doesn’t throw errors.

  4. Test:

    • Keyboard navigation

    • Screen reader announcement (NVDA/JAWS/VoiceOver)

    • Multiple pages where the class appears

This method lets you deploy precise accessibility improvements without touching the site’s codebase—a practical approach when you need safe, targeted fixes at scale.