Orientation of an element with a single class value

Question

If I have two elements, such as

<div class="one two three"></div>
<div class="one"></div>

And I want to grab a div that only has the "one"class name.

I know I can do it like this:

div[class="one"] 

because if I do div.one, it applies to both,

Is there any other way to get the item with the given name only?

edit - the goal is to reduce the number of selector characters

Answer 1

[class=one]is the shortest way to select only one class in CSS. If you are concerned that this will seem strange to other developers, just include a comment next to it.

---

, :not :

div {
  height: 100px;
  width: 100px;
  margin: 10px;
}
div.one {
  background: purple;
}
div.one:not(.two):not(.three) {
  background: red;
}

<div class="one two three"></div>
<div class="one"></div>

Hide result

Answer 2

CSS, , :

• div[class="one"]: a div, ""
• div[class$="one"]: a div, ""