47

I'm trying to alter the style of something based on wether or not its parent div is being overflown.

.pDiv { display: block; width: 300px; height: 100px; border: 1px solid rgb(0,0,0); }
.cDiv { display: block; padding 4px; border-bottom: 1px solid rgb(0,0,0);
.pDiv:overflow .cDiv { border-bottom: none; }

<div class="pDiv"><div class="cDiv">child 1</div><div class="cDiv">child 2</div><div class="cDiv">child 3</div><div class="cDiv">child 4</div><div class="cDiv">child 5</div></div>

is it possible to do something like this? I would use the last-child pseudo-selector, but the number of children can vary, so I want it to remove the border-bottom of the last-child ONLY IF the parent div is being overflown. I want a pure CSS solution too please, no JS!

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
CJT3
  • 2,788
  • 7
  • 30
  • 45

2 Answers2

25

CSS cannot select based on used or computed styles of any kind, so you're out of luck.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 2
    bah, that is lame. Basically, I'm trying to eliminate having 2 bottom-borders right on top of one another when the user scrolls to the bottom of the overflown parent div. Guess I'll have to use JS, too bad there isn't a simple CSS solution :( – CJT3 Nov 03 '12 at 20:54
  • 1
    @CharlesJohnThompsonIII: "simple CSS solution" is an oxymoron anyway – millimoose Nov 03 '12 at 20:55
  • 1
    You mean it's a Pleonasm? Sure, but it is definitely not an oxymoron. – CJT3 Nov 03 '12 at 21:07
  • 14
    To my knowledge, CSS can't select on used or computed styles, that's correct. But it can - in some cases - select on computed states, like :hover and :active. So I think there could be some hope that one day :overflowing might be such a selectable state. It would be mighty nice :) – Adrian Schmidt May 24 '16 at 07:02
  • 5
    @AdrianSchmidt until someone mistakenly kicks off an infinite re-render loop because their style for `:overflowing` removes the overflow and the original style re-triggers overflow... and so on. – canon Jul 01 '19 at 18:13
  • 2
    @canon Hmm… yeah… that's true… that's not an issue with other computed states of course. And that's probably why CSS can't select on computed styles as well – Adrian Schmidt Jul 02 '19 at 19:49
  • 1
    @canon wait... wait a sec... ok, I am now going to go make a infinite looping `:hover` object. – merlin Feb 21 '20 at 23:12
  • @charles-john-thompson-iii Sometimes the adjacent sibling selector can help `elm + elm { ... }` – digitaldonkey May 04 '20 at 16:55
  • 1
    This was discussed (and rejected) in https://github.com/w3c/csswg-drafts/issues/2011 – HolgerJeromin Jun 08 '22 at 19:33
  • If you can use JS, [an `IntersectionObserver` can tell you if an element overflows](https://github.com/w3c/csswg-drafts/issues/2011#issuecomment-351779626). – Chance Snow Feb 16 '23 at 16:52
2

It seems a handy solution for this is being cooked up: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

According to css-tricks, the feature "@container brings us the ability to style elements based on the size of their parent container."

You should already be able to use it, but beware that not every browser supports this yet.

This way, you might (read the note) be able to get out with something like:

.parent-div {
    max-height: 10rem;
    overflow-y: auto;
    container: size;
}

@container (min-height: 10rem) {
    .parent-div:last-child {
        border-bottom: none;
    }
}

The main idea here being that if the element reached it's maximum height, then it's all but always overflowing — so we just apply the style so long as it's at it's maximum height.

Unfortunately, my own browser does not support this yet, so I can't guarantee you it would work the exact way as it is written above. But if you refer to the 2 pieces of documentation I provided, you should be able to come out on top

Note:

The css-tricks page also mentions that "Currently, you cannot use height-based container queries, using only the block axis". I'm hoping this simply means using the full size axis is necessary in this case, but I'm not able to test this.

If someone could verify whether this solution works and then leave a comment here, that would be very much appreciated. I'd edit this answer and credit the person.

GuiMendel
  • 539
  • 4
  • 9