meaning and role of [class*=] css class selector

Question

Asking here since I can't pass a proper search query with that. Here's a code sample:

[class*="button_type"].state_2,
[class*="button_type"]:not(.state_2):hover{
    background-color:#fff;
}

Furthermore what would be the use of the :not suffix?

I cannot understand why it isn't just:

.button_type.state_2,
.button_type:hover { etc..}

Take a look here [w3c attribute selectors](https://www.w3.org/TR/css3-selectors/#attribute-substrings) — Alex Char, Mar 10 '16 at 12:27
Possible duplicate of [What is this CSS selector? \[class\*="span"\]](http://stackoverflow.com/questions/9836151/what-is-this-css-selector-class-span) — , Mar 10 '16 at 13:02

dippas · Accepted Answer · 2016-03-10T12:44:38.637

[class*="button_type"] is CSS class Selector (equivalent to CSS attribute selector) means that will select all elements whose class contains at least one substring "button_type".

take a look at this example:

[class*="button_type"] {
  background: red;
  width: 50px;
  height: 50px;
  display: inline-block
}

<div class="button_type"></div>
<span class="one_button_type"></span>
<article class="button_type_final"></article>

Regarding the :not() that means it will select everything but that selector which is inside the :not()

Take a look at this example:

[class*="button_type"] {
  background: red;
  width: 50px;
  height: 50px;
  display: inline-block
}
[class*="button_type"]:not(.state_2) {
  border: black solid
}

<div class="button_type state_1"></div>
<span class="one_button_type state_2"></span>
<article class="button_type_final state_3"></article>

meaning and role of [class*=] css class selector

1 Answers1