CSS selector based on width?

Question

Is there a CSS rule that would match elements based on their width? If not, would it be interesting to propose that in the standard?

One could do something like

Answer 1

I just saw an example of media queries within a selector, effectively the same thing, although a pseudo-selector would be very nice and likely supplant media queries. I think it would be nice to have a new pseudo-selector :aspect-ratio(4:3) supporting ranges like :aspect-ratio(>4:3). This would be super convenient for styling responsive elements based on their orientation and width to height ratio.

Answer 2

Is there a CSS rule that would match elements based on their width?

No.

If not, would it be interesting to propose that in the standard?

Maybe, but not the Selectors standard, because Selectors is not intended to be tightly coupled with the styling aspect of CSS.

There were proposals to standardize something called "element queries" a few years ago, but other than a few proofs-of-concept, they seem to have mostly dissipated. Probably because they're just not feasible to spec and implement in a way that is robust (cyclic dependencies immediately come to mind).

Answer 3

It is not possible to do it using CSS3, but you can use Element Queries. Check this library: https://elementqueries.com

Here is an example:

@element code and (max-width: 200px) {
  :self {
    white-space: nowrap;
  }
}

Answer 4

That might become inconsistent because new elements could be unexpectedly affected. I would just add a class that defines {wrap: nowrap;} to any elements in your html. Or if the element width changes on resize, just use some js.

window.onscroll = function(){
    var elementWidth = document.getElementById('elementID').style.width;
    if(elementWidth < 200){ .. do something .. }
    else{ .. reverse changes .. }
}