Как указать несколько селекторов атрибутов в CSS

В CSS можно выбирать элементы на основе нескольких атрибутов. Это может быть полезно, если вы хотите настроить таргетинг на определенные элементы с помощью комбинации критериев.

Синтаксис:

Чтобы выбрать элементы, соответствующие нескольким значениям атрибута, используйте следующий синтаксис. :

[attribute1=value1] [attribute2=value2]

Например, чтобы выбрать элемент ввода с атрибутом name="Sex" и атрибут value="M", вы должны использовать следующий селектор:

input[name=Sex][value=M]

Пример:

Рассмотрим следующую HTML-разметку:

Первый элемент ввода будет выбран селектором input[name=Sex][value=M], поскольку он имеет оба атрибуты name="Sex" и value="M". Второй элемент ввода не будет выбран, поскольку он имеет атрибут value="F" вместо value="M".

Примечание:

Использование кавычек вокруг значение атрибута требуется только в том случае, если значение не является допустимым идентификатором.

Ссылка:

Этот синтаксис: хорошо описано в стандартной документации CSS:

Multiple attribute selectors can be used to refer to several
attributes of an element, or even several times to the same attribute.

...

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }