Явный способ задания двух или более значений атрибута в css-селекторе

У меня есть селектор CSS следующим образом:

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

Есть ли более сжатый синтаксис вроде:

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

Это не работает, но что-то похожее?

Ответы

Ответ 1

Нет, боюсь, что нет. Пока нет предложений для перечисленных значений в селекторах атрибутов, таких как один в вашем примере, Селекторы 4 :matches(), по крайней мере, позволят вам ИЛИ селектора атрибутов в одном составном селекторе:

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

Тем не менее, вам, вероятно, придется придерживаться текущего, подробного синтаксиса в обозримом будущем, пока браузеры не начнут внедрять :matches().

Ответ 2

Нет, не в CSS, но с предварительным процессором, например LESS или SASS, вы можете вставлять атрибуты.

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

Он не может быть "лаконичным", поскольку конечный результат длиннее желаемого результата, но его несколько легче читать и может сократить некоторые повторения в вашей таблице стилей.