Приоретет родительского id ul над любыми другими классами и id: как?

Question

[Игорь]

Подскажите, на основе каких правил в данном случае стиль заданный как
#first ul
оказывается главнее внутренних переопределений списка, заданных как через class, так и через id?

Цвет списка через css не переопределяется, хотя может быть переопределен другими элементами или принудительно через style

Внешне ul class="three" должен получить цвет magenta, но на практике это не так.

Вопрос в том на основании каких правил так получается и как переопределить через класс или id элемента, задав новый цвет?

Ссылка
jsfiddle.net/P9EZU/15

css

#first {color: black;}
#first ul{color: blue;}

.second {color: red;} 

.three {color: magenta;}
.three ul{color: magenta;}

span {color: green;}

html

<div id="first">00
    <div class="second">
        1 
        <span>test</span>
    </div>
    
    <div class="second">
        
        <ul>
            <li>hello</li>
            <li>css</li>
        </ul>
        
        test №2
        
        <ul class="three">
            <li>hello</li>
            <li><span>css</span></li>
        </ul>
        
    </div>
</div>

Answer 1

[Andrey Baranichenko]

Переопределить можно(если я правильно понял) через !important
.three {color: magenta !important;} - так будет сиреневенький
или так - ul.three {color: magenta !important}
.three ul ка уже сказано выше не существует в этом варианте
вот здесь есть:

<ul class="three">
            <li>hellooo</li>
            <li><span>css</span></li>
            <li>
                     <ul>
	                 <li></li>
	                <li></li>
	                <li></li>
                  </ul> 
            </li>
        </ul>