How can I check if a particular class exists (html/css)?

Question

I use the following code which get applied on two different pages because both pages are using the same element:

.SocialBar {
display: none;
}

But I want the code to be applied to one page only. On the page where I want it, the following class exists:

.PersonalHome-interests.u-mbg

Is it somehow possible that I insert .PersonalHome-interests.u-mbg over the thing with the Newsticker and only let check whether the line PersonalHome-interests.u-mbg exists and if so, then Newsticker = display: none apply?

Thanks.

By the way, I use Stylish / Stylus. A good solution would be @-moz-document url but the problem is that it's the same url for both pages, you can just switch between two designs and I just want the change at one view. — Lukas
– Lukas, Commented Jan 25, 2018 at 1:37
I'm a little confused as to what your'e asking. You want to hide elements that have both the classes .SocialBar and .PersonalHome-interests, but show elements that only have the class .SocialBar? — Obsidian Age
– Obsidian Age, Commented Jan 25, 2018 at 1:39
If you have the CSS that has .SocialBar linked to web page, it will affect that page, unless you overwrite it. If you only want .PersonalHome-interests.u-mbg.SocialBar{ display:none; } on the CSS page that is used for multiple HTML pages, then do that. — StackSlave
– StackSlave, Commented Jan 25, 2018 at 2:04

Obsidian Age · Accepted Answer · 2018-01-25 01:42:38Z

1

I'm a little confused as to what your'e asking, but assuming you're asking how you can hide elements that have both the classes .SocialBar and .PersonalHome-interests, but show elements that only have the class .SocialBar, all you need to do is combine the class selectors into one as .SocialBar.PersonalHome-interests.u-mbg, and hide that.

Because you're specifically targetting elements that have both classes, the element that only has one of the two classes will not have the display: none rule apply to it (and so it will remain visible).

This can be seen in the following:

.SocialBar.PersonalHome-interests.u-mbg {
  display: none;
}

<div class="SocialBar">Visible</div>
<div class="SocialBar PersonalHome-interests u-mbg">Hidden</div>

Hope this helps! :)

answered Jan 25, 2018 at 1:42

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

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

1 Comment

Lukas Over a year ago

Thanks for you help :)

Collectives™ on Stack Overflow

How can I check if a particular class exists (html/css)?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related