CSS - why order of rules in CSS affects calculated value

Question

Let's say I have code like this:

<html>
<head>
  <style>
    div {
      background: yellow;
    }
    .px-0 {
      padding-left: 0;
      padding-right: 0;
    }
    .px-10 {
      padding-left: 2.5rem;
      padding-right: 2.5rem;
    }
  </style>
</head>
  <body>
    <div class="px-10 px-0">
      text that should have 0 padding
    </div>
  </body>
</html>

My question is - why padding for div is not 0? I always thought that rules should be applied based on order of classes used - in this case there is px-10 (with paddings) and then px-0 (with no paddings) so final result should be no padding.

It also seems the order of rules defines in CSS matters in this case - when I put .px-10 before .px-0 then result is as expected (but of course it will cause problem when using class="px-0 px-10").

Just in case above code is just simplified to scenario I have - use Tailwind CSS and I have some component that have set px-10 class (let's say I cannot remove it) and I was pretty sure that adding also px-0 after it would cause element won't have any padding but it seems I was wrong.

Additional question - is the only possible solution is writing additional CSS like this:

.px-10.px-0 {
  padding-left: 0;
  padding-right: 0;
}

to make it working?

The div has both classes, but `px-10` is the latter one, which means it counts. If you swap the two classes around in the CSS, it will get 0 `padding` — Marc Hjorth, May 16 '20 at 07:21
Also the first one overrides the second, since they are of equal strength. If you put `html` or `body` in front of it `px-0`, it will be used instead. — Marc Hjorth, May 16 '20 at 07:23
Looks like you're confusing the concept of the cascade order, it only applies in the cascading style sheet (or inline styles) itself, not the order in which you write the class attributes out at author time. You could get around this with _specificity_ as in your last example, but if you're going to be writing your own custom styles anyway and you have access to the elements in question to add those classes you should just add your own custom class, then you don't have to concern yourself with any unintended side-effects with the CSS utility framework you're using or verbose specificity. — UncaughtTypeError, May 16 '20 at 07:27

score 3 · Answer 1 · answered May 16 '20 at 08:35

There are two things that matter for CSS

First: Css always run from top to bottom it dosen't matter what is the order you have given to your classes.

It can be either <div class="px-10 px-0"> OR <div class="px-0 px-10">. It dosen't matter.

As you have given two classes to your div i.e px-0 and px-10

.px-0 {
  padding-left: 0;
  padding-right: 0;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

As you see px-10 rendering at the very bottom it will render the last values.

If you look at this code:

div {
  padding:0;
  background: yellow;
}

.px-10 {
  background-color:purple;
  padding-left: 10rem;
  padding-right: 2.5rem;
}
.px-0 {
  padding-left:0;
  padding-right:0;

This will render 0 padding for your div because px-0 is at the bottom and also giving color purple to the div, Because the last color property for your div is purple and as Css runs from top to bottom the last background-color property will be treated as purple for your div not yellow.

Second: Css looks if defined property is important or not!

If you define a specific property with !important

.px-10 {
  background-color:purple;
  padding-left: 5rem !important;   <--- Important one
  padding-right: 2.5rem;
}
.px-0 {
  padding-left:0;
  padding-right:0;
}

IF you put padding-left:5rem !important; in px-10 then css will render the padding-left:5rem property no matter if it was defined at the very bottom in px-0 or not, it will be treated as an important property.

For answering you question

As you mentioned that you are giving px-0 after px-10 but padding left and padding right are not zero because they are not at the very bottom of your CSS file.

<html>
<head>
  <style>
    div {
      background: yellow;
    }
    .px-10 {
      padding-left: 2.5rem;
      padding-right: 2.5rem;
    }
    .px-0 {
      padding-left: 0;
      padding-right: 0;
    }
  </style>
</head>
  <body>
    <div class="px-10 px-0">
      text that should have 0 padding
    </div>
  </body>
</html>

CSS - why order of rules in CSS affects calculated value

1 Answers1

There are two things that matter for CSS

For answering you question