How to change css if a specific string is in the URL?

Question

For an example, if I were to have a URL https://example.com/search.php?q=foobar&type=0&p=0, and I wanted to target specifically URLs with "type=0" in it, how would I do that?

I know you can use @document url() for URLs who's full name is known, but not with the link above.

EDIT: I'm not looking for the href value, I'm looking for something that will get the current pages URL, and check if it has a particular string in it. For example, if I were at the URL https://example.com/search.php?q=foobar&type=0&p=0, it would change whatever element I tell it to, but if it's https://example.com/search.php?q=foobar&type=1&p=0, it doesn't.

I probably should have made that a bit clearer.

disinfor · Accepted Answer · 2022-09-26 19:11:24Z

1

You can use the an attribute selector for this:

[href*="type=0"] {
  color: green;
}

[href*="zanzabar"] {
  color: red;
}

<a href="https://example.com/search.php?q=foobar&type=0&p=0">Link with type=0</a>
<a href="https://example.com/search.php?q=foobar&p=0">Link without</a>


<h2>Edit searching for just the parameter string without value</h2>
<a href="https://example.com/search.php?q=foobar&zanzabar=0&p=0">Link with type=0</a>
<a href="https://example.com/search.php?q=foobar&zanzabar=1&p=0">Link without</a>

edited Sep 26, 2022 at 19:11

answered Sep 12, 2022 at 18:33

disinfor

11.6k2 gold badges37 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

epascarello · Accepted Answer · 2022-09-12 21:33:23Z

0

Read the url parameters and find the one you are looking for

const urlParams = new URLSearchParams(window.location.search);
const pageType = urlParams.get('type');
console.log(pageType);

answered Sep 12, 2022 at 21:33

epascarello

208k20 gold badges206 silver badges246 bronze badges

Collectives™ on Stack Overflow

How to change css if a specific string is in the URL?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related