Add css style elements only for specific URL

Question

Is there a way to add CSS styling that works only when a specific URL is loaded. I have a URL that has /service/ at the end. Only for this I want some CSS styling to work on a specific Div (myDiv). Is there a way? I cannot add an ID to the body tag of that service page. The page is backoffice generated.

if(this.href.substr(this.href.lastIndexOf('/') + 1) == 'service') {//your css styling through js} — Rahul
– Rahul, Commented Feb 21, 2017 at 12:22

Carsten Løvbo Andersen · Accepted Answer · 2020-01-31 08:18:01Z

3

url.match("/service/$") will match if the url endswith /service/ because $ means endWith in a .match()

Update: To get the url use: window.location.href.match("/service/$")

var url = "www.stackoverflow.com/questions/service/"
if (url.match("/service/$")) {
  $('#url').css("background-color", "yellow")
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="url"> url </div>

edited Jan 31, 2020 at 8:18

answered Feb 21, 2017 at 12:22

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

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

4 Comments

Eddy Over a year ago

thanks. Is there a way to do the same but leaving out the: var url = "www.stackoverflow.com/questions/service/" ? So I don't have to specify the full URL path.

Eddy Over a year ago

Sorry Carsten, but where do I place: window.location.href.match("/service/$")

Dan D Over a year ago

any ways with css only?

Carsten Løvbo Andersen Over a year ago

@DanD. No that can't be done with css only

Manuel Koch · Accepted Answer · 2017-02-21 12:24:24Z

0

You can use the following:

if (window.location.href.indexOf('/service/') !== -1) {
  document.getElementById("myDiv").className += ' specialclass';
}

answered Feb 21, 2017 at 12:24

Manuel Koch

3613 silver badges15 bronze badges

1 Comment

Carsten Løvbo Andersen Over a year ago

You code checks if the href contains /service/ and not if it endswith

Carsten Løvbo Andersen · Accepted Answer · 2017-02-21 12:50:57Z

0

Try with CSS only

[href$='home']{
    color : red;
}

<a href="something/home">home</a>
<a href="something/home/somethingelse">home</a>

edited Feb 21, 2017 at 12:50

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

answered Feb 21, 2017 at 12:46

Ashish Kumar

2301 silver badge7 bronze badges

2 Comments

Carsten Løvbo Andersen Over a year ago

How does this add a css style to an element if the url of the current page ends with a specific string?

Ashish Kumar Over a year ago

ok my bad i misunderstood the question. Question is for the url of the page.I thought for a anchor tag

Collectives™ on Stack Overflow

Add css style elements only for specific URL

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related