css - 入力要素と選択要素の両方を同じクラスでターゲットにする方法

Question

これを2回書くことなく両方の要素をターゲットにするようにするにはどうすればよいですか

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


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

これは動作しません

.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;
}

複数の CSS セレクターはコンマで区切る必要があります。上記のように、セレクターごとにセレクター全体を繰り返す必要があります。

また、css を読みやすくするために、各コンマの後に改行を入れるのが一般的な方法です。結果には影響しないため、次の意味は同じです。

.field_with_errors select,
.field_with_errors input {

と

.field_with_errors select, .field_with_errors input {

Answer 2

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