Не могу понять, почему скрипт 1-ый цикл воспринимает как правильный

$(".columnBTN").click(function() {
            if($(this).children(".arrow_filter").children(".classBtnUp").css({"color": "#6b73ff"})) {
                $(".columnBTN").css({"background-color": "#3a3847"});
                $('.arrow_filter').children('i').css({"color": "#888888"});
                $(this).css({"background-color": "#1D1C24"});
                $(this).children(".arrow_filter").children(".classBtnDown").css({"color": "#6b73ff"});
            } else if ($(this).children(".arrow_filter").children(".classBtnDown").css({"color": "#6b73ff"})) {
                $(".columnBTN").css({"background-color": "#3a3847"});
                $('.arrow_filter').children('i').css({"color": "#888888"});
                $(this).css({"background-color": "#1D1C24"});
                $(this).children(".arrow_filter").children(".classBtnUp").css({"color": "#6b73ff"});
            } else {
                $(".columnBTN").css({"background-color": "#3a3847"});
                $(this).css({"background-color": "#1D1C24"});
                $(this).children(".arrow_filter").children(".classBtnUp").css({"color": "#6b73ff"});
            }
        })

Писал скрипт для изменения цветов блок и если нажимать на один и тот же блок, то стрелка одна из двух стрелок красится в фиолетовый, а другая в серый и наоборот. Но получается так, что почему-то 1-ая проверка воспринимается как true.