Select the attribute having different value in different element

Question

For radios having different name attribute like(code is in pug format)

input.radio.(name='value1' type='radio')
input.radio(name='value2' type='radio')

how to select all of these with on selector, something like

.radio[name = 'value1'], .radio[name= 'value2']{code}

but if I do like this the code gets too long for more radios. Is there any other way to do this ?

use a class instead? if you have to use the attribute selector, you can use the [attribute starts with selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#attrvalue_4) — Pete, Jan 13 '23 at 13:11

score 0 · Answer 1 · answered Jan 13 '23 at 13:12

You can use the * wildcard to select based on a specific attribute. Here is a simple example of using wildcard with input elments. It selects all the elements containing the word input in the name attribute. Read more about wildcard.

input[name*="input"]{
width:20px;
height:20px;
}

<input type="radio" name="input1"><br>
<input type="radio" name="input2"><br>
<input type="radio" name="input3"><br>
<input type="radio" name="input4"><br>
<input type="radio" name="input5"><br>

Select the attribute having different value in different element

1 Answers1