CSS not updating in IE / Edge?

Question

Here is the JsFiddle

I have a css rule depending on the display status of a neighbor:

#top:not([style*="display: none"]) + #bottom {
  color:red;
}

When I hide the '#top' div using javascript, the color changes since the css rule is no longer valid. This is not the case in Internet Explorer and Edge ! Am I doing something wrong or is this just a bug in Microsofts browsers ?

score 1 · Accepted Answer · answered Nov 20 '17 at 15:36

I would avoid that approach, as it's somewhat fragile. Instead, explicitly toggle a class on a parent element or #top, and make your CSS changes based on that:

body.toggled #bottom {
  color:red;
}
body.toggled #top {
  display: none;
}

$("#btn").click(function() {
  $('body').toggleClass('toggled');
});

Demo

CSS not updating in IE / Edge?

1 Answers1