Apply CSS to a specific page which contains nasty chars

Question

I have a page called "MyPage" which contains ".MyClass". So if want do hide the content I do:

.page-MyPage .myClass {
    display: none;
}

This works perfect. Stuff is not shown.

Now let's assume the page is called "MyPage/el". How do I do this? How do I specify the page name in CSS?

The following does not work:

.page-MyPage/el .myClass {
    display: none;
}

.page-MyPage\/el .myClass {
    display: none;
}

.page-MyPage\005cel .myClass {
    display: none;
}

.page-MyPage-el .myClass {
    display: none;
}

I have 20.000 on this website. All are imperatively shipped with `.myClass`. On the page called "MyPage/el" I want to hide the contents of this class not on page "Hello" not one page "World" but just on page "MyPage/el". I know that this is far from being perfect and this is why I asked. Thanks. — kghbln, Apr 13 '18 at 21:35
but CSS doesn't consider page name, what you said is not in the CSS world ... unless your are not telling us everything — Temani Afif, Apr 13 '18 at 21:39
So the answer is "No" instead of "what??" Thanks for clarifying. — kghbln, Apr 13 '18 at 21:42
the `what ??` is because you said it worked ! so i was surprised how it worked — Temani Afif, Apr 13 '18 at 21:49
by the way you CMS is wordpress ? if it's i can tell what to do instead — Temani Afif, Apr 13 '18 at 21:50
Ah, I am with you. :) No, it is not Wordpress but I guess there are people out there who would like to know this for Wordpress. — kghbln, Apr 13 '18 at 22:01

TheoretiCAL · Answer 1 · 2018-04-13T21:50:00.077

0

.page-MyPage .myClass are both class selectors, and are unrelated to the page name in any way. The class selectors must contain valid characters as the class names must contain valid characters, for a full list see Which characters are valid in CSS class names/selectors?. .page-MyPage/el, .page-MyPage\/el, and .page-MyPage\005cel are invalid css class names and as a result you cannot create a css rule targeting them.

You cannot specify a page name as part of a css selector.

If you wanted to have different .myClass css rules on different pages, you would need to load different stylesheets on each page <link rel="stylesheet" type="text/css" href="pagestyle.css">, or define the <style>.myClass{}</style> on a given page.

edited Apr 13 '18 at 21:50

answered Apr 13 '18 at 21:20

TheoretiCAL

19,461
8
43
65

`.myClass` is added imperatively to every page by the CMS. I have no means to change this. So I have to figure out how to apply this to an individual page called "MyPage/el" which I currently do not know how to specify. I will read through the links provided. Thanks for your assistance. – kghbln Apr 13 '18 at 21:32
@kghbln if your working with a CMS, you should be able to add your own html to a given page, in which case just edit the individual page in the CMS, open the html view of the page, and add your own ` – TheoretiCAL Apr 13 '18 at 21:34
Only within within limits. For me the solution was .page-MyPage_el .myClass { display: none; } So this is probably CMS specific. – kghbln Apr 13 '18 at 21:43
@kghbln your solution `.page-MyPage_el .myClass { display: none; }` is equivalent to `.myClass { display: none; }`. Ensure you refresh the pages you are testing on with ctrl+shift+r to avoid loading cached css. – TheoretiCAL Apr 13 '18 at 21:51
Thanks a bunch for your assistance. Much appreciated! – kghbln Apr 13 '18 at 22:02

Apply CSS to a specific page which contains nasty chars

1 Answers1