如何为存在的一个类编写CSS选择代码，而为其他几个不编写代码呢？

Question

I have this Less code:

btn {
    &.answered {
        color: #bbb;
    }
}

How could I modify this so the color is set to #bbb only if there is a .answered class and if there is not a btn-success or btn-danger or btn-warning class?

I do realize that I could do this by adding the btn-success , btn-danger and btn-warning classes after this code but I really would like to find a selector that would do this for me so it does not depend on the position of the other classes.

Answer 1

You should chain the :not pseudo-selector like in the below snippet. This will select the button when it doesn't have even one of the other 3 classes. In other words, this is equivalent to saying exclude all elements where x OR y OR z is present.

Less Code:

button{
  .answered{
    &:not(.btn-success):not(.btn-warning):not(.btn-danger) {
      color: red;
    }
  }
}

Demo based on compiled output:

 button.answered:not(.btn-success):not(.btn-warning):not(.btn-danger) { color: red; } 

 <button class='answered'>Click Me</button> <button class='answered btn-success'>Click Me</button> <button class='answered btn-danger'>Click Me</button> <button class='answered btn-warning'>Click Me</button> <button class='answered btn-warning btn-success'>Click Me</button> <button class='answered btn-danger btn-success'>Click Me</button> <button class='answered btn-warning btn-danger'>Click Me</button> <button class='answered btn-warning btn-danger btn-success'>Click Me</button> 

---

A comma separated list of :not selectors (grouping) would exclude only the element which has all 3 other classes. It will not work (exclude) when even one of the other class is present on the element. In other words, it is equivalent to saying exclude all elements where x AND y AND z are present.

You can see in the below snippet how it applies red color to all elements which don't have all the other classes together. It behaves in this way because when the element has .btn-success , it still doesn't have one of the other two.

 button.answered:not(.btn-success), button.answered:not(.btn-danger), button.answered:not(.btn-warning) { color: red; } 

 <button class='answered'>Click Me</button> <button class='answered btn-success'>Click Me</button> <button class='answered btn-danger'>Click Me</button> <button class='answered btn-warning'>Click Me</button> <button class='answered btn-warning btn-success'>Click Me</button> <button class='answered btn-danger btn-success'>Click Me</button> <button class='answered btn-warning btn-danger'>Click Me</button> <button class='answered btn-warning btn-danger btn-success'>Click Me</button> 

Answer 2

btn {
    &.answered:not(.btn-success):not(.btn-danger):not(.btn-warning) {
        color: #bbb;
    }
}