是否有用于溢出的 css 伪选择器？

Question

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!

Answer 1

CSS无法根据任何类型的已用或计算样式进行选择，因此您运气不佳。

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