html - CSS priorities and targeting specific elements -

my question should pretty strait forward. reason can't wrap head around today.

i'm making menu structure so

<div class="wrapper">     <ul>         <li class="menu-item"><a href="#">menu item</a>             <div class="inner">                 <a href="#">login</a>              </div>         </li>     </ul> </div> 

i trying target login link using following css selector:

.inner a{} 

the selector working, following selector taking css presidence, , overriding above selector:

li.menu-item a{} 

i'm totally baffled. why second selector take style preference on first? how guys recommend target above "a" elements?

why second selector take style preference on first?

because second selector more specific first. first contains one class , one type selector while second has one class , two type selectors.

to calculate specificity, think of selector consiting of 4 numbers, starting @ (0,0,0,0)

• inline styles have highest specificity , take place of first number (1,0,0,0).
• id's count second number (0,1,0,0)
• classes, pseudo-classes (other :not()) , attribute selectors count third number (0,0,1,0)
• type selectors , pseudo-elements - e.g. div {} or ::after{} count fourth (0,0,0,1)

also:

• the universal selector * has no effect on selectors specificity.
• combinators +, ~ , > have no effect on specificity.
• !important rules take precedence; though don't affect 4 numbers associated selectors specificity. !important rule can override defined one. the exception when defined !important rule has more specific selector. here, normal rule of specificity (described above) apply.