Is it possible to target elements that have certain CSS stylings?

Question

For example: a rule that makes all elements that have display: block have overflow: auto. This rule obviously has to take in the default styling of the browser as it's the browser that'll make so many elements display set to block.

This is to help escape the problem of collapsing margins!

Why would you want to do this? Short answer: No. Long answer: maaaaybe... but please don't. Also, we can't help much without having code: https://stackoverflow.com/help/minimal-reproducible-example — Obed Parlapiano, May 12 '20 at 15:46
There's no way to target those elements in CSS. There's a way to get those elements using the DOM/CSSOM, but it would be extremely resource-intense and would likely reduce your application to a crawl. — Heretic Monkey, May 12 '20 at 15:48
Thanks for the reply. It would be to help the problem of collapsing margins (https://stackoverflow.com/questions/13573653/css-margin-terror-margin-adds-space-outside-parent-element) — rfrostr, May 12 '20 at 15:50
You can target the elements that *most* browsers will default the `display` property to `block`, but not the ones that have been redefined. For instance, you could target `div`s, but if you had a class that applied to a `div` that had a rule `display: inline`, it would still be targeted by the hypothetical rule. — Heretic Monkey, May 12 '20 at 15:52
The "problem" of collapsing margins is solved by being aware of them and adjusting your rules to accommodate them, not put a fix in that would just have different side effects (including unwanted multiple scrollbars, perhaps). — Heretic Monkey, May 12 '20 at 15:56

score 0 · Accepted Answer · edited May 12 '20 at 17:05

I've been in situations like yours many, many times where you can't change markup due to using a third party API, back end developers architect the backend a certain way etc and management needs something done. so I would do something like this:

div[style="display: block"] {
  color: red;
  background-color: blue;
}

<div style="display: block">
  hey
</div>

Please note that this will only work if the style your targeting is inline

In terms of targeting an element with styles determined in a CSS file, I don't think that's possible.

Is it possible to target elements that have certain CSS stylings?

1 Answers1