Css class and tags precedence issue

Question

Here is my code:

.text-center > div > div {
  margin-left: auto;
  margin-right: auto;
 }
 
 .my-icon {
  margin: 3px 3px 0;
 }

<div class="text-center">
  <div class="my-icons">
    <div class="my-icon"></div>
    <div class="my-icon"></div>
    <div class="my-icon"></div>
  </div>
</div>

I don't understand why the margin settings of

text-center > div > div

overwrites the margin settings of

.my-icon

??

please check the answers on duplicate marked Q/A. By the way you can force the lowest priority by adding `!important` — Ali Sheikhpour, Nov 21 '19 at 09:50
https://specificity.keegan.st/ can help you understand specificity better, if you’re still lacking the knowledge in that regard. — 04FS, Nov 21 '19 at 09:50
You can find some example for a better understanding on the following urls https://specifishity.com/ and https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity — Ray Soy, Nov 21 '19 at 09:51
@AliSheikhpour Yes, that's exactly I was looking for! Thanks for the clearance :) — Soner Kalonya, Nov 21 '19 at 10:08

score 0 · Accepted Answer · answered Nov 21 '19 at 09:54

The number of class selectors is equal, so the comparison is done in type selectors. The first selector has more type selectors so it is more specific.

Specificity is based on the number of each kind of selector in the entire thing, not for the part on the right hand side of the rightmost combinator.

Css class and tags precedence issue

1 Answers1