Is there a way to include multiple attributes inside a bracket selector?

Question

Is there a way to shorten these lines of code and not repeat myself, since they do the same thing?

.my-form input[type="text"]{
    padding: 8px;
    width: 100%;
}
.my-form input[type="email"]{
    padding: 8px;
    width: 100%;
}

yes, something like .my-form input[type="text","email"] – Sérgio Leite Jul 07 '19 at 18:50 — Sérgio Leite, Jul 07 '19 at 18:50

score 1 · Answer 1 · answered Jul 07 '19 at 18:38

1

If the only input fields are text and email then you can simply set your code in .my-form input {//code here}.
The best way to go about this would be to use a CSS Preprocessor such as SASS. It would help in achieving such re-usability in code.

answered Jul 07 '19 at 18:38

Abdul Hannan

thanks for your answer, but there are multiple other input fields. These are the only that I want those attributes applied. – Sérgio Leite Jul 07 '19 at 18:47
Then the best method would be to use SASS. If you haven't use it already, this maybe a nice chance for you to explore about SASS. Its super easy and makes life easier with CSS – Abdul Hannan Jul 07 '19 at 18:48

score 0 · Accepted Answer · answered Jul 07 '19 at 18:43

0

Besides removing the "[type=...]" as Abdul Hannan suggested, the only shorter way I can think of to express this would be the following:

.my-form input[type="text"],
.my-form input[type="email"]{
    padding: 8px;
    width: 100%;
}

answered Jul 07 '19 at 18:43

Seth McCauley

Yes! This works just fine. I never saw using multiple selectors like this. Will look more into it, thanks! – Sérgio Leite Jul 07 '19 at 18:52

2 Answers2