+- Proxy Community (https://proxycommunity.com/forum)
+-- Forum: Technical Community Support (https://proxycommunity.com/forum/forum-technical-community-support)
+--- Forum: API and Development (https://proxycommunity.com/forum/forum-api-and-development)
+--- Thread: How do I target an HTML query selector element that contains a partial class? or What's the best way (/thread-how-do-i-target-an-html-query-selector-element-that-contains-a-partial-class-or-what-s-the-best-way)
How do I target an HTML query selector element that contains a partial class? or What's the best way - secureDrift_88 - 22-06-2024
Title: *"How do I target an html query selector element that contains a partial class?"*
Hey folks!
Struggling a bit here—trying to select an html query selector element that contains a partial class. Like, say I have a class like `btn-primary-large`, but I only wanna target elements with `btn-` in the class name.
I know `querySelector` can do exact matches, but what's the trick for partial matches? Tried `[class*="btn-"]`, but not sure if that's the *best* way or if there's something cleaner.
Any tips? Maybe a regex solution or am I overcomplicating it?
Thanks in advance! 🙌
(Also, if this has been asked before, sorry—my search-fu is weak today.)
“” - CloudDrifter99 - 21-12-2024
Hey! The `[class*="btn-"]` approach you mentioned is actually one of the cleanest ways to target an html query selector element that contains a partial class.
If you wanna get fancy, you could use `document.querySelectorAll('[class^="btn-"]')` to target classes that *start* with "btn-".
Regex might be overkill unless you're dealing with super complex patterns. Stick with CSS selectors—they’re fast and readable.
Check out MDN’s guide on attribute selectors for more tricks!
“” - proxyXchangeX - 26-01-2025
Yo! `[class*="btn-"]` is totally valid, but watch out—it’ll also match stuff like `disabled-btn-primary` if that’s not what you want.
If you need *only* classes that *begin* with "btn-", use `[class^="btn-"]` instead.
For regex fans, you *could* do `document.querySelectorAll('[class]').filter(el => el.className.match(/btn-/))`, but that’s slower. CSS selectors FTW!
“” - MaskedMaverick77 - 08-02-2025
The `*=` operator is perfect for partial matches in an html query selector element. No need for regex unless you’re doing something wild.
Pro tip: If your classes have multiple names (like `btn-primary large`), `[class~="btn-"]` won’t work—it’s for whole words. Stick with `*=` or `^=` for flexibility.
MDN’s docs on attribute selectors are gold for this.
“” - IPVeil88 - 21-02-2025
`[class*="btn-"]` is the way to go! It’s simple and works across all browsers.
If you’re using jQuery (I know, old school), you could do `$('[class*="btn-"]')`, but vanilla JS is just as easy.
Regex is overkill unless you’re parsing dynamic classes with weird patterns. Keep it simple!
“” - MaskedLegend99 - 13-03-2025
Hey! For targeting an html query selector element with a partial class, `[class*="btn-"]` is solid.
But if you’re worried about performance, `document.querySelectorAll('[class^="btn-"]')` might be faster since it checks the start of the string.
Regex would work (`/btn-/`), but it’s heavier. Only go there if CSS selectors can’t handle your case.
“” - phantomSurferX - 22-03-2025
`[class*="btn-"]` is your friend here! It’s the most straightforward way to match partial classes in an html query selector element.
If you’re dealing with multiple classes, just remember `*=` looks for the substring *anywhere* in the `class` attribute.
For more complex stuff, check out CSS-Tricks’ guide on attribute selectors—super helpful!
“” - shadowRoute88 - 24-03-2025
The `*=` selector is perfect for this! It’s how I always target partial classes in an html query selector element.
If you’re using frameworks like React or Vue, though, double-check how they handle dynamic classes—sometimes the DOM isn’t what you expect.
Regex is fun but usually unnecessary for this. Stick with CSS!
“” - secureDrift_88 - 25-03-2025
Thanks everyone! `[class*="btn-"]` worked like a charm—didn’t realize it was that straightforward.
I tried the regex approach too, but yeah, it felt clunky compared to CSS selectors.
One follow-up: What if I need to exclude elements with *both* `btn-` and `disabled`? Would `[class*="btn-"]:not([class*="disabled"])` work?
Y’all are lifesavers! 🙏
“” - vpnLurkerX - 25-03-2025
`[class*="btn-"]` is the move! It’s clean and does exactly what you need for partial class matching.
If you’re paranoid about edge cases (like `old-btn-new`), `[class^="btn-"]` or `[class|="btn"]` might help.
Regex is cool but way heavier. Only use it if CSS can’t hack it.