39

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
  • 665,005
  • 155
  • 1,345
  • 1,328
CJT3
  • 2,618
  • 7
  • 27
  • 42

1 Answers1

20

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

BoltClock
  • 665,005
  • 155
  • 1,345
  • 1,328
  • 1
    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
  • 13
    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
  • 4
    @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