Is there an order for assigning css?

Question

css

There is html .container> .rect and there are styles for it

.container
    ...
.rect
    ...

Everything works, but there is one very important point, the grid framework generates similar code and the end result is the following -

.container .rect{...}
.container
    ...
.rect
    ...

And even so, everything worked until I decided to rewrite with class nesting, so -

.container
    ...
    .rect
        ...

And in the end it turned out like this -

.container .rect{...}
.container .rect{...}

And from that moment on, the layout fell off. And from here the question is - is there an order in which the css code is executed? That's why they didn't rewrite the generated code without class nesting, but rewrote it with nesting?

Answer 1

There is a notion of "selector specificity". Those. its "weight". Styles are those with higher specificity.
So that I don’t write a lot of words here, I’ll give a link , well, you can still google it.
You
end up with .container .rect{...}
.container{}
.rect {}
in the third line one id in the selector - .rect specificity will be 1
in the first line two ids .container and .rect specificity will be 2
so styles from the first line will override the styles from the third line
Next, you are trying to nest. But for some reason you miss the point that initially there is no nesting.
you have selectors
.container{}
.rect{}
after your edits, they will turn into
.container{...}
.container .rect{...}
As we can see,
the .rect{} selector is gone. and he should be.
You wrote that at the output you have
.container .rect{...}
.container .rect{...}
The second line is what used to be the selector .rect{} specificity = 1
And now its weight has grown, and became equal to =2
In the first row, the weight is also equal to =2
Previously, when the second row had weight=1, the styles from the first row overlapped the styles from the second.
Now the weight of the selectors is the same, and the ones below in the code are applied.
As a result, we don't have the necessary style overlap, and everything breaks down.
For what purpose are you trying to rewrite the code?