CSS class change by class underneath it?

Question

Our project usually has a professional web developer that handles this sort of thing. But ours left, and we're still looking, so this weirdness falls to me. We have a situation where a list of lines under a node has to affect the parent node's look.

<span class="feedback">
  <ul>
    <li class="info">Just an info message</li>
    <li class="error">This is an error</li>
  </ul>
</span>

In the above, if all the li's are not error, we want one look, but if there's even ONE error, we want a different look. Is that something CSS can do? if so, how? Is there something I can do on feedback that makes it show one way under no errors, and a different way if there are?

Will probably be possible with the CSS4. Atm. the pseudo `:has` can do it but its support is really bad. — VXp, Nov 22 '17 at 00:09
Possible duplicate of [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Jon P, Nov 22 '17 at 00:39
No, I don't think it's a dupe of that question because I am asking the exact opposite, if there's a selector going to the child. I want the feedback class to reflect that there is AT LEAST ONE error class as a child. That question seems to want the CHILD to discover it's PARENTS. — Entropy, Nov 22 '17 at 14:13
Nope, that still sounds like a parent selector, you want to change the appearance of the parent based on a property of a child element. Let's make a hypothetical parent selector `?` you could do what you want with `.error ? .feedback {background-color:#F00;}` — Jon P, Nov 24 '17 at 00:04

score 1 · Accepted Answer · answered Nov 22 '17 at 00:00

1

Appending class has-errors to span.feedback on the back-end is not an option? If you have control over what comes from the back-end I'd try to do something like such approach instead (it's somehow simpler):

<span class="feedback has-errors">
  <ul>
    <li class="info">Just an info message</li>
    <li class="error">This is an error</li>
  </ul>
</span>

Otherwise, as far as I know, it's not possible to accomplish precisely what you're asking only through CSS. But if you use JS, you could also make it happen (far from ideal), IMO.

answered Nov 22 '17 at 00:00

leandroico

1,130
12
16

@leanroico - Adding a class to the parent is probably possible, just MUCH less elegant. The server code that generates this section isn't modularized in such a way as to make this easy. So I figured I'd check if a pure CSS solution was even an option because I knew it could do some stuff, but my CSS isn't strong enough to know if it could do this. – Entropy Nov 22 '17 at 14:11
I see. Yeah, I feel your pain. It's less elegant indeed. I also went through such need already before and never got any satisfactory solution. Maybe on the next CSS spec they can enable us to do so. – leandroico Nov 22 '17 at 15:19

CSS class change by class underneath it?

1 Answers1