How to add Custom Css within the Editor?

I’ve been struggling for a while with this one.

I am trying to target an element within a column or block, in this case the ‘Submit’ button of a WPForm.

So I open the developer tools in Firefox, select my element and get the class name:

<button type="submit" name="wpforms[submit]" id="wpforms-submit-863" class="wpforms-submit" data-alt-text="Sending..." data-submit-text="Submit" aria-live="assertive" value="wpforms-submit">Submit</button>

Now, in the editor I select the form (or column) and add the following to the custom CSS section:

.button[type="submit"] {
  background: yellow;
}

I’ve tried wpforms-submit and other variations however, nothing happens and it’s not the first time. I think I just don’t understand something about the logic or nesting or else.

How do I target an element with custom CSS in the Editor?