Home/ Questions/Q 7863271
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T23:25:47+00:00

I’m new and i have a question about CSS3 and :empty pseudo-class. I create

  • 0

I’m new and i have a question about CSS3 and :empty pseudo-class.

I create a web ajax application. In my page layout I’ve got a sidebar and i want to hide this if is empty. So i wrote:

#my_sidebar:empty { display:none;}

For display it when isn’t empty i wrote

#my_sidebar:not(:empty) { display:block; }

This is working but with chrome the sidebar appear only after one click on the page or on a link. Why?
Can someone help me?

Thanks! (excuse me for my terryfing english!!)

EDIT:
the html page:

    <body id='body'>

<!-- Header -->
<header id="top" class="cf">
    <div id="branding">
        <h1><a href=" " onClick="presenter.homepage()">Project Management</a></h1>
    </div>
    <nav id="nav-user">
        <ul>
          <li><a id="user" href="profilo"><span id="username"></span><img id="avatar" class="avatar"></a></li>
          <li><a id="company" href="azienda">Azienda</a></li>
          <li><a id="logout" href="logout">Logout</a></li>
        </ul>
    </nav>
    <nav id="nav-main">
        <ul class="cf">
         <li>
            <button id="back" onClick="javascript: history.back();" href="#" />&larr;</button></li>
        </ul>
       <!--popup con task finiti -->
        <div id="task-ended" class="cf">
          <div class="triangle-border top">
          <div class="clear"></div>
        </div>

    </div><!--task-ended-->
    <!--popup con task finiti -->
  </nav>
</header>

<!-- Main Body -->
<div id="container" class="cf">
    <div id="loading" style="display:none"><img src="images/loading.gif" /></div>
    <div id="my_sidebar" class="sidebar"></div>
    <div id="main" class="main"></div>
</div>
<footer class="cf" id="footer">

Mentis Project Management 
</footer>
</body>

and css:

.sidebar {
 float:right;
 width: 36%;
 text-align:left;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The Chrome bug apparently only happens with the display property, so you can instead set visibility: hidden; to make it invisible and position: absolute; to prevent the space from being reserved. This doesn’t require the use of :not(:empty).

    As always, whenever you find yourself pushing browsers to their limits, stop and ask yourself if there’s a simpler way to do the job. Depending on what you need, simple calls to jQuery’s show() and hide() method could work just as well. 🙂

    • 0