0

I have block parent elements that have at least one inline-block child element which may or may not meet a specific condition. I'd like to style the parent to highlight the presence of a particular child type (below, "special" class):

<parent>
    <child class="normal">Text</child>
</parent>
<parent>
    <child class="special">Text</child>
</parent>

Normally, this wouldn't be an issue since I would just drop an equivalent class on the parent via JavaScript. However, in this case I'm writing a style sheet for the Firefox add-on Stylish, so I have no JavaScript DOM access and can only work with the preexisting content. Supposed solutions I've found online include:

parent < child.special {/*style*/}
parent! > child.special {/*style*/}
parent:has(child.special) {/*style*/}

However, the latest info I could find on this issue is from 2013 or earlier, and it seems that all of the above methods are no longer part of the CSS specs (or at least don't work in Firefox v32.0.x).

If anyone can provide guidance on this (even if just to tell me it cannot be done), I would greatly appreciate it. Keep in mind, it only has to work in Firefox, so even if it's a "-moz" solution, I'll take it. I know that ascending ancestry is contrary to the purpose of cascading style sheets and in most cases would be poor form, but my current circumstances mandate doing so.

DKqwerty
  • 1
  • 4
  • Those selectors are for jQuery, rather than standard CSS. CSS has no selector capable of doing what you want. – Nick Coad Oct 16 '14 at 02:05

2 Answers2

2

There are no such selectors in standard set yet.

The only thing that you can use now is this:

parent:empty { /*style*/ }
c-smile
  • 24,546
  • 7
  • 54
  • 79
  • Thanks for replying! However, this won't work because I always have a child, it's just a question of which type. – DKqwerty Oct 16 '14 at 01:56
0

Nope, can't currently be done. See Mozilla's own documentation seeing you're after a FireFox only solution.

Jon P
  • 17,053
  • 7
  • 44
  • 64