Succinct way of specifying two or more values for an attribute in css selector

Question

I have a CSS selector as follows:

#foo input[type=number].form-control, #foo input[type=text].form-control

Answer 1

No, I'm afraid there isn't. While there are no proposals for enumerated values in attribute selectors like the one in your example, Selectors 4's :matches() will at least allow you to OR two attribute selectors in a single compound selector:

#foo input:matches([type=number], [type=text]).form-control

That said, you will probably have to stick with the current, verbose syntax for the foreseeable future, until browsers start implementing :matches().

Answer 2

No not in plain ol' CSS, but with a pre-processor like LESS or SASS you can nest attributes.

#foo {
    input.form-control {
        &[type=number],
        &[type=text] {
            /* your css styles here */
        }
    }
}

It's prehaps not 'succinct', in that the end result is longer than your desired outcome, but it is somewhat easier to read, and may cut down some repetition in your stylesheet.