Почему мой код на работает

есть код электронного журнала проблема в том что при выборе из выпадающего списка оценки выпадающий список должен окрашивается в цвет .но по какой то причине окрашивается только варианты выпадающего списка(код писал chatGPT)
html:

<script>
const students = [
'Арсеньева Элина','Архипов Юрий','Барсеган Анаит','Буренкова Вероника','Иванова Арина','Карпенко Ярослав','Лещук Стефания',
'Маркович Ярослав',' Метелев Роман','Миронян Маркус','Морозова Соня','Назврян Данель','Начкебия Давид','Разказова Есения',
'Романова Таисия','Секерджитский Мечислав','Синеченков Евгений','Цуркан Ульяна','Чайкин Андрей','Шелободова Ксения','Янкавцева Ксения'
,'Пирова Полина','Курбанов Сулейман'
];

students.forEach((student, index) => {
document.write(`<tr onmouseover="highlight(this)" onmouseout="resetHighlight(this)">`);
document.write(`<td>${index + 1}</td>`);
document.write(`<td>${student}</td>`);
for (let j = 0; j < daysCount; j++) {
document.write(`
<td>
<select class="selecter" onchange="updateAverage(this)" data-student="${index}" data-day="${j}" >
<option value="">-</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">H</option>
<option value="absent">*</option>
</select>
</td>
`);
}

css

select{
padding: 5px;
border: 1px solid #bbb;
border-radius: 4px;
background-color: #f9f5ec;
outline: none; /* Убираем обводку при фокусе */
}

.selecter [value="5"] {background-color: #399993;}
.selecter [value=""] {background-color: #000000;}
.selecter [value="4"] {background-color: #b0d46b;}
.selecter [value="3"] {background-color: #ecdc49;}
.selecter [value="2"] {background-color: #fa6363;}
.selecter [value="1"] {background-color: #a0a0a0;}
.selecter [value="absent"] {background-color: #1100ff;}

Код пришлось чутка укоротить чтоб войти в лимит