このような場合、両方ではなく
上にある ul と button だけが有効になるのですが
なぜなのでしょうか？

下側の ul と button にクラスをつけることで解決はできたのですが
各要素にクラスをつけて対応するのが一般的なのでしょうか？
HTML

<div>
    <ul></ul>
    <input type="text">
    <button>add</button>
</div>

<select>
    <ul></ul>
    <option>赤</option>
    <option value="blue">青</option>
    <option value="white">白</option>
</select>
<button>選択</button>

JavaScript

document.querySelector('button').addEventListener('click', () => {
    const li = document.createElement('li');
    const color = document.querySelector('select');
    li.textContent = `${color.value} - ${color.selectedIndex}`;
    document.querySelector('ul').appendChild(li);
});