CODEWITHSUNDEEP
css
wasim kazi
wasim kazi

Reputation: 378

same css class work different on different url

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.

Upvotes: 0

Views: 255

Answers (4)

LeBen
LeBen

Reputation: 2049

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;
}

Upvotes: 1

phunder
phunder

Reputation: 1713

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.

Upvotes: 0

code-jaff
code-jaff

Reputation: 9330

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

Upvotes: 0

Joe Mornin
Joe Mornin

Reputation: 9134

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.

Upvotes: 0

Related Questions