:Empty Pseudo Class Issue with Added/Removed Content and Sibling Combinators

:empty pseudo class issue with added/removed content and sibling combinators

Something like this will work, but it's not particularly pretty:

ul:empty {}

ul:empty + div {
    color: red;
}

ul + div {
    animation: repaint 1000s infinite linear;
}

@keyframes repaint {
    from { zoom: 1; }
    to { zoom: 0.99999; }
}

See: http://jsfiddle.net/vd2Hx/

Tested in Chrome, Firefox, Safari, Opera, and IE.

CSS :target pseudo class and sibling issue

The general sibling combinator ~ doesn't work backwards. So, since your .titlewrap is coming before #tevents in your HTML, your selector won't work.

Unfortunately there's no previous sibling combinator, so if you can't change the markup and style the changes accordingly, then you can't do this with :target and a sibling combinator.

By the way, your top: 30% style isn't taking any effect either, and that's because you didn't set an explicit height for your .titlewrap.

Why does the general-sibling combinator allow toggling pseudo-element's content, but not the adjacent-sibling?

This is a long-standing bug in WebKit browsers related to the use of certain dynamic pseudo-classes with next-sibling combinators. This happens whether you're applying styles to the sibling element itself or a pseudo-element of that sibling element.

I don't know if anybody has filed a bug report yet, but this has been seen rather frequently on the site:

• Webkit bug with `:hover` and multiple adjacent-sibling selectors
• CSS adjacent sibling selectors, Safari and <nav> elements

Strangely it was also reported that Chrome had issues with the general sibling combinator, but as you note it works in your given scenario:

• Why doesn't this CSS selector work: a:hover ~ span?

So either that was fixed, or something else triggers/triggered it.

Adjacent sibling selector not working with dynamically added class in IE7/8

Well, this is a known bug, see the section about + selector here: http://www.quirksmode.org/css/contents.html

:empty pseudoclass when adding dynamic content

The fiddle you provided works for me with FF10 and IE9. It only fails in Chrome (18+)

Not sure why this happens, as the quirksmode page works in Chrome as well..

For the force-discard it seems to be do-able by setting almost any css property with code..

example at http://jsfiddle.net/gaby/YprUV/9/

Update

Ok, i found this Chrome bug report that is about :empty selector misbehaving when used with display:none

It is marked as fixed, but perhaps we should re-oopen it..

Here is a test that does not use display:none (it just changes the background color) and it works just fine.. http://jsfiddle.net/YprUV/11/

Apply style to element with empty next sibling using Sass

The first, major problem your markup has is that it's invalid.

The only valid children of <ul> elements are <li>s. Therefore, in order to be valid, your inner <ul> has to be inside the <li>. It can't be an immediate child of another <ul>.

But, even assuming a valid markup:

<ul class="menu">
  <li class="label">Hide me when submenu is empty
    <ul class="submenu"></ul>
  </li>
</ul>

... what you're trying to do is not possible using CSS alone, because the CSS parser never goes backwards (or upwards, for that matter).

If you can't do it with CSS alone you can't do it with SCSS alone, because SCSS is CSS syntactic sugar.

---

Here's how a JavaScript solution would look like:

const uls = document.querySelectorAll('ul');[...uls].forEach((ul) => {  const emptyChildUls = ul.querySelectorAll('ul:empty');  [...emptyChildUls].forEach((emptyUl) => {    emptyUl.parentElement.classList.add('hasEmptyList');  })});

ul li.hasEmptyList {  display: none;}

<ul>  <li>Hide me when submenu is empty    <ul></ul>  </li></ul>

CSS :valid :invalid behaves different when using the sibling selector in IE

This seems very similar to :empty pseudo class issue with added/removed content and sibling combinators (this one is however for the + combinator and the :empty pseudo class). However a similar fix would work, namely add an infinitely looping animation on the .test element - add this at the end of your style section

input + .test {
    animation: repaint 1000s infinite linear;
}

@keyframes repaint {
    from { opacity: 1; }
    to { opacity: 0.99999; }
}

Note that I changed it from zoom (in the linked question) to opacity.

link:visited doesn't work with sibling combinator

I did not find anything in the Specs, that expicitely prohibits the sibling combinator from working with this pseudo class, however:

The :visited pseudo-class is a special case, since it can be abused to infringe the users privacy. That's why browser are allowed to treat :visited differently. To my knowledge, browsers simply lie about the styling of visited links, while still applying the styles - technically they would be allowed to not apply :visited styling at all. I suppose, that most vendors just decided, to not apply styling to sibling combinators ^{( Since this is only speculation on my side, if somebody has a concrete source for this, please confirm.)}.

See the note in the spec

Note: It is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user's consent.

UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently.

console.log(`Browser is lying about  the color of the i element - should be olive, but is ${window.getComputedStyle(document.querySelector("a i")).color} (red) instead.`);

a{
  color:red;
  display:block;
  text-decoration:none;
  font-size:20px;
}
a:visited{
  color:#bada55;
}
a:visited ~ div{
  color:LightGoldenRodYellow !important;
}
a span{
  color:RebeccaPurple;
}
a:visited i{
  color:Olive;
}
a:last-of-type{
  color:hotpink;
}
a:last-of-type + div{
  color:MediumSeaGreen;
}

<a href="#">Is red while not visited! <span>Is always RebeccaPurple!</span> <i>Should be olive once link is visited!</i></a>
<a href="#">Will be #bada55 when visited!</a>
<a href="#">Will be hotpink!</a>
<div>Should be LightGoldenRodYellow, but is MediumSeaGreen!</div>

---

Related Topics