CSS Multiple Attribute Selector

This article is about CSS multiple attribute selector. Attributes can be select only after selecting the HTML element.

What is an attribute selector?

The attribute selector is a selector using an HTML attribute name and attribute value. We can use the given attribute selector between the [] square bracket only. You don’t need to put the attribute name in double quotes but you must put the attribute value in double quotes. We can do attribute selection for every HTML element.

What is a multiple attribute selector?

In CSS selecting multiple attributes is called a multiple attribute selector. We should give multiple attribute selectors in [] square bracket

Syntax of Multiple Attribute Selector

selector[attribute1][attribtue2]...[attributen]
{
declaration list;
}

Example of multiple attribute selector

CSS:

input[type="button"][value="Male"]
{
border:2px solid black;
background-color: cyan;
}

HTML:

<input type="button" value="Male">
<input type="button" value="Female">

Output:

In the above code, we have 2 input tags with type and value attributes. Both <input> tags have type value given as “button”. One is given the value of the “value” attribute as “Male” and the other as “female”. So, the male and female input button is create.

I want to design an HTML element with the value “button” in the type attribute and the value “male” in the “value” attribute in the input tag. In this situation, we can use the multiple attribute selector. In CSS, we select (input[type=”button”][value=”Male”] ) using multiple attribute selector. so, the style will be apply only to the ‘male’ button.