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

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..}