Question

How can I write this so it targets both elements without writing it twice

.field_with_errors input{
    color: red;
    background: #CEF6EC;
    border: 1px solid red;
}


.field_with_errors select{
    color: red;
    background: #CEF6EC;
    border: 1px solid red;
}

This does not work

.field_with_errors select input{
    color: red;
    background: #CEF6EC;
    border: 1px solid red;
}

Answer 1

.field_with_errors select,
.field_with_errors input {
    color: red;
    background: #CEF6EC;
    border: 1px solid red;
}

multiple css selectors must be separated with a comma. You have to repeat the whole selector for each of them, as above.

also, it’s a common practise to have a line break after each comma, to keep your css more readable – it does not affect the result, so the following mean the same:

.field_with_errors select,
.field_with_errors input {

and

.field_with_errors select, .field_with_errors input {