External CSS doesn't work, while inline styling does work

Issue

If I write this in my external css file it does make 'a' text green.

.ink-navigation ul.menu.black li ul.submenu li a {
   color: green;
}

but this works

<nav class="ink-navigation"> 
   <ul class="menu black">
     <li>
       <ul class="submenu">
         <li>
           <a href="#" title="" style="color:green">This is a text</a>
        </li>
       </ul>
     </li>
   </ul>
</nav>

Does anybody knows why the external css does not work?

Solution

CSS executes in order; therefore rules at the bottom of your CSS are given higher priority and override any prior rules. Also, inline CSS executes after the stylesheet and since it is seen last, it takes priority.

A simple fix would be to add important to the colour... e.g:

• color: green!important;

On a side note, I highly recommend that you reduce your code by removing unnecessary bloat which actually contributes to such problems as this. If .ink-navigation is unique you don't need to use your current format. Use .ink-navigation ul li ul li a {} or even .ink-navigation .submenu a {}. However, if you have existing rules with the larger format then that will override the shorter format, so its important to address all occurrences if you want to shorten your code.

Answered By - Simon Hayter