How to Specify Multiple Attribute Selectors in CSS

In CSS, it's possible to select elements based on multiple attributes. This can be useful when you want to target specific elements with a combination of criteria.

Syntax:

To select elements that match multiple attribute values, use the following syntax:

[attribute1=value1] [attribute2=value2]

For example, to select an input element with the attribute name="Sex" and the attribute value="M", you would use the following selector:

input[name=Sex][value=M]

Example:

Consider the following HTML markup:

The first input element would be selected by the input[name=Sex][value=M] selector because it has both the name="Sex" and value="M" attributes. The second input element would not be selected because it has the value="F" attribute instead of value="M".

Note:

Using quotation marks around an attribute value is required only if the value is not a valid identifier.

Reference:

This syntax is well-described in the CSS standard documentation:

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; }