Не работает слайдер JavaScript

Всем привет, вообщем практикуюсь на JavaScript, дело дошло до слайдера, и тут заминка. Делаю вот такой вот контейнер:

<section class="first_sect">
    <div class="slider">
        <div class="img_box">
            <img src="img/img1.jpg" alt="google.com" class="opas">
            <img src="img/img2.jpg" alt="google.com" >
            <img src="img/img3.jpg" alt="google.com" >
            <img src="img/img4.jpg" alt="google.com" >
            <img src="img/img6.jpg" alt="google.com" >
            <img src="img/img5.jpg" alt="google.com" >
        </div>
    </div>
</section>

Применяю следующее css правило:

.img_box > img {
   opacity: 0;
}

Делаю класс c opacity:1 для первого потомка img, далее через js через итерацию и newclass меняю класс у последующих элементов.

Собственно вопрос, почему приоритет для
.img_box > img {
    opacity : 0; 
}

Выше чем класс

.opas {
    opacity: 1;
}

И при переборе классов, opacity остается неизменным.

P.S решил проблему задав свойство опасисти, через класс

.slider img {
    opacity: 1;
}

Вообщем, спасибо за ответы, извините если вопрос нубовский. Только учюсь. Успехов Вам!)