Feature request - target zero-height elements

First off, I use Stylish a lot, so I have no control over the markup. I have encountered a situation where an element has a zero-height but still has content, so an :empty pseudo class selector can not be used.

Given the following markup, I would like to change the position of the navigation bar based on the (non-zero) height of the notification:

<div id="notification"><table></table></div>
<div></div>
<nav id="topbar">...</nav>

The following CSS would be useful:

#notification:not(:zero-height) ~ #topbar {
    top: 34px;
}

Using the actual height of the notification would be nice, but I’ll save that proposal for later

Or, maybe a more useful request would be to add a :has-height pseudo class? Because I think one would almost always use :not(:zero-height).

The typical answer to such proposals is that selecting elements via CSS by something that depends on CSS could lead to infinite loops. For example, see the recent thread about the potential :in-view() selector at www-style@w3.org mailing list.

What’s unclear is why they apparently ignore the fact that the feature could be used at least with JS methods like querySelector() where infinite loops wouldn’t be an issue.

Why isn’t topbar pushed down when content appears in notification? It seems to me that your problem should be solvable with CSS alone.

As I said, I am using Stylish to apply custom userstyles. The site does push down the topbar when the notification is filled only due to the fact that it comes before the topbar element in the HTML. My custom style is setting the topbar style to position:fixed thus disrupting the flow.

When no notification is displayed, the div#notification is completely empty. A table is added inside when there is a notification, but only the tr is removed once cleared by the user.

If you need specifics, the style I am applying is StackExchange Sticky Header. And when visiting http://area51.stackexchange.com/ for the first time, new users will see a welcome notification.

topbar.gif1153×685 797 KB

@Mottie I think this is a case of unsuitable markup, and that the correct approach would have been to put both notification and topbar inside a fixed-positioned element. In that case, both child elements would be ‘in flow’ (inside their parent) and you wouldn’t have to position them individually.

If we agree that the problem is unsuitable markup, then this is not a valid use case for introducing a new CSS feature. Have you considered using JavaScript to dynamically position topbar whenever notification is toggled?

Yes, the markup isn’t ideal, but I have no control over it. I could write a userscript to reposition the topbar, but it I don’t think anyone would bother to use it since the notifications don’t pop up that often.

I’m sure the requested pseudo-selector would still be useful in other situations where :empty isn’t targeting the desired elements; especially when used in conjunction with javascript. But, I don’t have another use-case in mind.

Hey! There’s not currently a way to do this using regular CSS, but using JavaScript and a plugin we can express a query that targets this in a very CSS-like way!

I’ve used EQCSS in the past to target empty inputs using (max-characters: 0) since CSS isn’t aware of input:empty, so why not use (min-height: 1px) to apply a style to only elements at least 1px tall?

<div id="notification"><table></table></div>
<div></div>
<nav id="topbar">...</nav>

<style>
  @element '#notification' and (min-height: 1px) {
    $this ~ #topbar {
      top: 34px;
    }
  }
</style>

<script src=http://elementqueries.com/EQCSS.js></script>

A solution could be something as simple as that!

What happens if you do :zero-height { height: 1px } ?