Apply CSS rule to elements matching one of multiple possible attribute values

Question

I'm trying to apply css rule for multiple values of html attribute.

I've tried to apply it like described here, with no success:

input[name="a"][name="b"] {
    display: none;
}

<input name="a"> <!-- should be hidden -->
<input name="b"> <!-- should be hidden -->
<input name="c"> <!-- should not be hidden -->

The rule isn't applied at all.

However, when I use only one attribute selector, it works for that one matching element:

input[name="a"] {
    display: none;
}

<input name="a"> <!-- is hidden -->
<input name="b"> <!-- is not hidden -->

What am I doing wrong / is there any way to define it except duplicating rules?

Aniket G · Accepted Answer · 2019-03-17T16:36:13.663

Put them separately and use a comma in between like below.

This code applies the css to input[name="a"] and/or input[name="b"].

Look at the docs to find out more.

Note: I used background-color: red; instead of display: none; so you can see the difference. To suit your problem, change it back to display: none;

input[name="a"], input[name="b"] {
    background-color: red;
}

<input name="a" />
<input name="b" />
<input name="c" />

Apply CSS rule to elements matching one of multiple possible attribute values

1 Answers1