CODEWITHSUNDEEP
htmlcss
Yinon
Yinon

Reputation: 955

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

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?

Upvotes: 3

Views: 369

Answers (1)

Aniket G
Aniket G

Reputation: 3512

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" />

Upvotes: 5

Related Questions