-2

I am new in CSS, I need help in setting background colour of parent span based on which colour child span class has.

For example, I want to set blue background of <span class="aciTreeItem"> if its first span child has class background_blue

MY HTML:

<span class="aciTreeItem">
  <span class="aciTreeIcon icon-server-not-connected background_blue"></span>
  <span class="aciTreeText">AWS(Cluster-1)</span>
</span>

My CSS:

span.aciTreeItem:has(.background_blue)
{
    background: blue;
}

But this is not working, Please suggest.

Murtuza Z
  • 5,639
  • 1
  • 28
  • 52
  • :has is not supported in CSS3 - https://developer.mozilla.org/en-US/docs/Web/CSS/:has - and CSS as it is does not have a parent selector. You need to use script – I haz kode Nov 07 '17 at 06:26
  • There is currently no way to select the parent of an element in CSS. – Patrick Mlr Nov 07 '17 at 06:26
  • 1
    You'll need a javascript solution. **.eg:** `var childWithClass = document.querySelectorAll('.aciTreeItem > .background_blue'); for (var i = 0; i < childWithClass.length; i++) { childWithClass[i].parentElement.style.background = "blue"; }` – UncaughtTypeError Nov 07 '17 at 06:52

1 Answers1

-2

span.aciTreeItem >.background_blue{
background:blue;
}
<span class="aciTreeItem">
  <span class="aciTreeIcon icon-server-not-connected background_blue">cvcv</span>
  <span class="aciTreeText">AWS(Cluster-1)</span>
</span>
Pratik Vekariya
  • 45
  • 8