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 code:max-width(200px) { white-space: nowrap; } to have all small code tag force line break.

I know I could use some js.

Decor

You can already define a CSS class to contain the specific styles you want then use the class name as a selector – Desiccate

Answer 1

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).

Ebenezer

for the second one simply because we have media query that am sure can handle what he have in mind – Nicotine

@Temani Afif: #12252250 – Ebenezer

i know this :) but i meant that if we know the website we developped we know when our element will reach a specific widh at certain break point thus using media query we can handle this ... of course am not talking about complex situation where elements are dynamical or interactive etc as in this case we have JS involved and we can handle this with JS – Nicotine

@Temani Afif: Yeah if you can directly correlate the width of an element with a media query, no one is stopping you from using media queries, but it's clear that media queries weren't designed to solve that kind of problem (for reasons you already gave in your comment) and we shouldn't pretend that they were. – Ebenezer

Answer 2

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

Rainstorm

Answer 3

Container queries have now been added to CSS, which deals with this particular issue.

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

.post {
  container-type: inline-size;
}

/* Default heading styles for the card title */
.card h2 {
  font-size: 1em;
}

/* If the container is larger than 700px */
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

Link to further description and explanation of the example: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries

Can I Use: https://caniuse.com/css-container-queries

Cockaleekie

Answer 4

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

Ariannearianrhod

Answer 5

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.

Mauromaurois