CSS Question - True Or False?

1

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

Mick

2

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

2 Likes
3

https://www.w3schools.com/css/css_specificity.asp

Screenshot_2022-11-04-18-07-11-402-edit_com.brave.browser
Screenshot_2022-11-04-18-07-11-402-edit_com.brave.browser1080×1016 187 KB

1 Like
4

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
5

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%}
}

6

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