1.21 gigawatts 1.21 gigawatts - 1 month ago 11
CSS Question

Is there a CSS selector that applies when matching specific values in the URL?

Is there a selector that specifies CSS to only applied when matching a specific URL or part of URL?

For example, here is my CSS stylesheet:

p {
color: green;
}

url("home.html") {
color: blue;
}

url("about.html") {
color: yellow;
}

path("/path/index*") {
color: indigo;
}


When the user visits home.html I want the home.html selector to be applied. When I'm on the about.html URL I want the about.html to be applied.

CSS media queries allow you to switch to a different set of styles when the width of the view changes. It also lets you specify a different set of styles when the user is going to view on the screen or send it to a printer.

My question again is, "Is it possible to specify a different set of styles depending on the URL or values in the URL." So it's not a question of how to do what I'm asking but if it's possible to.

I am using a CMS and it has a theme that allows you to add your own CSS. There is one stylesheet. That's it. Not two but one.

And I have one page that has specific CSS to that page and only that page. That is the origin of this question. There may be a thousand workarounds but my question is not about the workarounds.

Answer Source

To be sad there is no pseudo classes to select element's based on URL.The only way you can do it is by adding class to the body tag or specific element and then override the CSS.