same css class work different on different url

Question

In my site I am stick with some CMS. In my cms there is some sticky layout. Now My client needs two different look on it.

So when I am on "homepage" my DIV class test show different and when I am on other page so that same class work different.

This is for home page .test { some data }

This is for Other Page .test { some data some data }

So is there any way to make condition in css that if my URL is homepage so call this otherwise call this.

Actually I want my lyaout for Home page 200 * 780 and rest of the site's pages left column : 180 right column : 200. so how can I get that — wasim kazi, Aug 16 '12 at 11:48

score 1 · Answer 1 · answered Aug 16 '12 at 09:09

You should add a custom class on your body, like the page name.

<body class="home">
  ...
</body>

<body class="my_page">
  ...
</body>

Then you can have a different style for each one.

.home .test {
  background: red;
}

.my_page .test {
  background: blue;
}

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

You can't use CSS to detect the URL. So, you'll need to detect the URL with JavaScript (like this), or better, detect it on the backend.

edited May 23 '17 at 12:27

Community

1
1

answered Aug 16 '12 at 06:56

Joe Mornin

8,766
18
57
82

score 0 · Answer 3 · edited May 23 '17 at 12:04

Same css wont work differently for different pages(URLs), One way you can do is changing the inline styles with JavaScript. But it will be painful if you suppose to change a whole style-sheet.

Other way is, it is more than detecting the URL, you need to change the style-sheets dynamically for different pages. Different style-sheets may have same classes but with different styles.

Therefore, create separate style-sheets and apply dynamically.

You can get some idea about changing style-sheets dynamically here

score 0 · Answer 4 · answered Aug 16 '12 at 08:27

0

You could use JavaSctipt to detect the URL, and then again use JavaScript to add an extra class to the body if you are on the home page. You then write separate CSS styles for elements contained within this new class.

answered Aug 16 '12 at 08:27

phunder

1,607
3
17
33

same css class work different on different url

4 Answers4