Question

I have multiple input elements in a form. I would like to specify a single css selector for all input elements that have an attribute “type” with value either “text” or “email”. How do I specify a single selector?

e.g.

#ABC.XYZ .MNQ input[type="text"] {
margin-bottom: 8px;
}

I know I can put a comma at the end and repeat the whole selector with the type=”email”. Wondering if there is a shorter form to do the same with any special operators?

Answer 1

I am pretty sure the quickest way is:

#ABC.XYZ .MNQ input[type="text"] , #ABC.XYZ .MNQ input[type="email"] {
margin-bottom: 8px;
}

It would look nice to have a shorter selection line; but for overall code execution efficiency there would be no difference.