Selector Problem - Using previous video with this one

When following this video (and the previous one) I noticed an issue when using the selectors.

In this video he eddited the class "form-contact" using this selector:

 .form-contact {
    padding: 20px 24px;
    background: #f4f7f8;
} 

Then added this class selector and then added the class to the HTML to create a border-radius.

.br {
    border-radius: .5em;
}

This is the HTML

<form class="form-contact br">

This all works fine.

But when you use the selector from the previous video, and then add the .br class it completly removes the background for the .form-contact class. (Using the same HTML).

Previous selector:

form[class="form-contact"] {
    padding: 20px 24px;
    background: #f4f7f8;
}

I read the docs but I can't find a reason why is does this...

Does it have anything to do with the attribute selector string class="form-contact" not able to be matched once we put the "br" in there as well?

Can anyone shed some light?