0

Is it possible to apply CSS to a div which has no visible children without using JQuery?

Example:

<div class="myparent">
   <div class="invisible"> I'm invisible</div>
   <div class="invisible"> I'm invisible</div>
   dummy text
</div>

.invisible {
    display: none;
}

.myparent {
    background-color: green;
}

As style for the myparent class I'd like to use something like this.

.myparent :has(:not([style*="display:none"])) {
   background-color: blue;
   border: 1px solid red
 }

Result in this case should be that the should have the blue background and a red border.

daniel aagentah
  • 1,672
  • 5
  • 29
  • 56
sonix
  • 243
  • 2
  • 17
  • 1
    I don't think so but I'de be happy to be proven wrong. – Jonas Grumann Nov 15 '16 at 14:00
  • 2
    Should work, if `:has` would be implemented, [which is currently not the case](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) in any of the major browsers. – GolezTrol Nov 15 '16 at 14:01
  • 1
    The only way using CSS is to add additional class to the parent element, like `has-hidden-children` and then apply those styles to that class. – Vucko Nov 15 '16 at 14:03
  • "without using JQuery" — Do you really mean "jQuery"? Because if so the response is "Yes, obviously. jQuery is just JavaScript written by other people. If they can write code that can do it, then code that can do it can be written, what have you tried?" Otherwise, if you mean "JavaScript" then see http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – Quentin Nov 15 '16 at 14:54

0 Answers0