Increase [hidden] specificity

[CyrilKrylatov]

Hello everyone,

A few days ago I had to use a hidden attribute that has .d-none.d-md-flex classes on it. I was quite surprised that the .d-md-flex overide hidden's display: none property, as you can see there: https://codepen.io/CyrilKrylatov/pen/JjJKwNK

For me, having hidden attribute should override those classes utilities.

How do you feel about that idea? Should I open an issue?

Cheers and take care!

[ghost]

Watching over the css of bootstrap, it is found that
[hidden]{display:none!important;}
d-md-flex{display:flex!important;}

Both are important.
Maybe our own custom styling can fix this issue.
Preferable is inline styling which overrides the external styling.

[lordfpx]

A solution could be to over-specify hidden attribute selector:

[hidden][hidden] {
  display: none !important;
} 

example: https://codepen.io/lordfpx/pen/xxrRXxO?__cf_chl_captcha_tk__=pmd_ZIBwYG81lUeZwt5La_MfUJrEUOXqtbP.c9m85rRuTnk-1630956568-0-gqNtZGzNAxCjcnBszQeR

[CyrilKrylatov]

Sure thing we can do that but I was wondering if the [hidden] selector should be higher than the class utilites or should the selector been over-specified directly in Bootstrap. Just to be sure that [hidden] will hide our element no matter the class utilites.

[lordfpx]

That depends on css file order inside Bootstrap

[ffoodd]

I tend to think you'd better toggle .d-*-none insted of [hidden] to hide something. We provide [hidden] styles in our reboot only to ensure our defaults won't show something it shouldn't— however from my point of view, using .d-md-flex means you really want this being displayed.

That's the whole point of utilities, so playing at this level requires to use the equivalent power (another utility) to hide something.

Bumping specificity is not something we'll do in our core, and making an attribute selector win over a utility class selector neither.