CODEWITHSUNDEEP
csscss-selectors
Robert Vanden Eynde
Robert Vanden Eynde

Reputation: 758

CSS selector based on width?

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.

Upvotes: 12

Views: 14010

Answers (5)

Morten Christiansen
Morten Christiansen

Reputation: 19570

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

Upvotes: 3

Ted Fitzpatrick
Ted Fitzpatrick

Reputation: 928

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.

Upvotes: 0

Nikita Seleckis
Nikita Seleckis

Reputation: 94

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

Upvotes: 0

williamsi
williamsi

Reputation: 1606

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

Upvotes: 1

BoltClock
BoltClock

Reputation: 723678

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

Upvotes: 4

Related Questions