0

For example:

<div id="element1" class="c1 c2 c3"></div>
<div id="element2" class="c1 c2 c3 b1"></div>

Is there any CSS selector that will allow me to select elements that contain only and exactly classes c1, c2 and c3.

So I want to be able to get element1 but not element2, and I'm not using the ID because thats actually the same on every page, but I want to be able to find when the div has only those classes and nothing else.

Thanks!

1
  • [class="c1 c2 c3"] ?
    – Banzay
    Commented Jan 6, 2017 at 22:08

1 Answer 1

3

Use Attribute Selectors

[class="c1 c2 c3"] {
    color: red;
}
<div id="element1" class="c1 c2 c3">Item 1</div>
<div id="element2" class="c1 c2 c3 b1">Item 2</div>

5
  • I tried that but it doesn't seem to select what I want, or anything. The classes that I want to look for are on the body element and when matching them I want to set a contained element to display:none. This is what the markup actually looks like: <body class="c1 c2 c3"> <div class="hide-this"></div> </body> On some pages the classes c1, c2 and c3 and some others appear in the body tag. So I want to hide the hide-this div on any where body only has c1, c2, c3. I tried: body[class="c1 c2 c3"] .hide-this{ display: none; }<br/> Am I doing that right?
    – Bjorn W
    Commented Jan 6, 2017 at 22:20
  • Yes, you're. Here's your code working at jsfiddle.net/b84gg94q Commented Jan 6, 2017 at 22:28
  • Ok, thanks. Must be some SharePoint weirdness thats preventing it from working. I see that that should be the correct way to do it.
    – Bjorn W
    Commented Jan 6, 2017 at 22:37
  • Make sure your body has the class names in that same order and that display attribute of your targeted element is not being overridden by some other class. Commented Jan 6, 2017 at 22:37
  • I found the problem. There were 4 spaces between c2 and c3. So the [class=""] selector needs to be exactly whats entered in the class attribute of the element. Good to know.. might be an issue.
    – Bjorn W
    Commented Jan 6, 2017 at 22:41

Not the answer you're looking for? Browse other questions tagged or ask your own question.