CSS Question - True Or False?

Hello all,

Just a quick true or false question :slight_smile:

An ID styled at a higher breakpoint cannot be overridden by a class at a lower breakpoint without using !important.

True or False?

  • I thought you could, and I have situations where I cannot, but I am not 100% sure, so I do not want to create a bug report if it is true.

Many thanks


If I remember correctly, the styling with ID will inherit class styling. Wait for more statements.



1 Like

Thanks @jornes @dan

I appreciate and am aware of the specificity hierarchy, but was not sure how that played out on different breakpoints (media queries)?

Example on Desktop first basepoint :

A class with a max-width of 90% on Desktop (nothing on ID)
The ID is set to a max-width of 70% on Tablet
The class on mobile now becomes fixed at 70% (unable to change)

Is that correct? :thinking:

1 Like

Yes the ID takes precedence on the class.
But the class will still show 90% in the mobile breakpoint in bricks builder.

@media (max-width: 991px) {
#IDName {max-width: 70%}

is more specific than

@media (max-width: 478px) {
.ClassName {max-width: 90%}

It seems so. Therefore, I don’t style with ID. Only global classes.