Why isn't my last instruction taking precedence? CSS - html

Question

Here is my CSS source code
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
width: 100%;
height: 100%;
background: #42455a;
}
.menu ul {
display: inline-flex;
margin: 50px;
}
.menu ul li {
list-style: none;
margin: 0 20px;
color: #b2b1b1;
cursor: pointer;
}
.logo img {
width: 30px;
margin-top: -7px;
margin-right: 48px;
}
.active {
color: #19dafa !important;
}
.search {
margin-left: 398px; /* problem in this line */
}
I have a ul full of li's, and I set their properties in the ".menu ul li {}" category. The thing is I don't want ALL of them to have the same properties, I want the last one which is a search bar to be all the way on the right, like so:
" - - - - ___________ -"
where each "-" represents an li and the "_" is the space in between. The problem is in the very last category I made the margin-left 398 pixels. But despite that being the last instruction it is still following the instructions set before.
When I use !important it works, but I don't see why I would need to use it when supposedly the final instruction takes precedence?
The problem also applies in the .active class as well. Why do I have to use the !important to get it to work? Seems like a hassle if I have to use !important everytime I want a unique property in one of my elements.
EDIT:
I ended up finding a work-around by typing:
.search {
right: 20px;
position: absolute;
}
but my question still stands.

Answer 1

The final rule in your CSS does not take precedence. The various selectors of a CSS rule combine to form a specificity number which is what determines which CSS rules are applied. Classes, tag names, IDs, and other element attributes each increase the specificity score of a rule -- the more selectors, the more specific the rule.
You add together all of the specificity weightings and can essentially read it like a 4-digit number. For example, using a tag gives +1 while a class gives +10 (this isn't totally accurate, see reading materials at end). So your rule for .search has a specificity of 10 since it's just a class, while your rule .menu ul is 11 since it's a class with a tag. When applied to the same matching elements, the properties defined in .menu ul will take precedence over .search despite .search being written last.
!important essentially acts like a boolean flag to work regardless of the specificity scores. However, two rules with !important flags will still fall back to specificity. Similarly, if two rules have the same specificity, only then does the last one written take precedence.
For further reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://css-tricks.com/specifics-on-css-specificity/