karim karim - 6 months ago 11
HTML Question

Why is css rule taking precendence

i have 2 rules that i apply to an html element,

nav
and
pull-right


html

<ul class="top-header__nav nav nav-inline pull-right">
<li><a href="#">Acceussil</a></li>
<li><a href="#">Acsssceuil</a></li>
<li><a href="#">Accessuil</a></li>
<li><a href="#">Accesssuil</a></li>
<li><a href="#">Accesssuil</a></li>
</ul>


css

.nav {
margin: 0;
padding: 0;
}

.pull-right {
margin-left: auto;
}


normally,
ul
should have
margin
right to
auto
, but the nav
margin:0
take precedence why??

-- here is an image of chrome developper tools :

enter image description here

Answer

According to the screenshot posted, the pull-right class is on line 32 whereas the nav class is on line 38 which explains why nav overrides pull-right.

It doesn't matter if you place the HTML codes like this:

<ul class="top-header__nav nav nav-inline pull-right">

Or like this:

<ul class="top-header__nav pull-right nav nav-inline">

as the succeeding property in your css overrides the preceding property in your css (unless !important tags are used of course).