Is styling css with nested <div> always commutative?

Question

I am trying to understand whether the order in which you define css styling using div tags matters.

Is:

<div class="some styling 1">
  <div class="some styling 2">
  Some content
  </div>
</div>

Always the same as:

<div class="some styling 2">
  <div class="some styling 1">
  Some content
  </div>
</div>

?

Thanks!

Answer 1

Clearly not, if you were for instance to put

border: 2px solid #000000;
padding: 5px;

on some styling 1, and padding: 5px; on some styling 2

The first instance will produce a box with a border on the outside box and the content will have a padding of 5px relative to the border, plus 5px of padding relative to the inner box, meaning the content will have 10px padding and an outer border. Here the border is 10px away from the content

The second instance will produce a box with an outer padding of 5px then a 2px border followed by 5px padding then the content. As you can see the border has now shifted position and is 5px away from the content