Easiest and CLEANEST way to exclude one element from styling-CodePudding

I have gone through so many threads and forums in search for an answer to my question. Let´s say I have three buttons throughout my html. One on /home, one on /about and one on /portfolio.

<div>
<button>button1</button>
<button>button2</button>
<button>button3</button>
</div>

While I want button1 and button2 to be the same (except for color) I want button3 to be different. Button1 and button2 have hover states and a transform and button3 must be a simple flat button without any interactivity.

What is the easiest and most importantly cleanest way to write exclude one element from a group of elements? I have tried ":not()" without success.

CodePudding user response：

If you want button 1 and button 2 to be same in terms of style, give those two buttons a same class. If you want to add hover states to those two button try .class:hover {your styles here}

CodePudding user response：

The least verbose way (in terms of HTML) would seem to be to give a class to those buttons that you want to exclude from the hover action as this means most of your elements don't need a class added.

button:not(.nohover):hover {
  transform: scale(2);
}

<div>
  <button>button1</button>
  <button>button2</button>
  <button >button3</button>
</div>