How can I target a child class only if the first child has a specific class?

Issue

How can I target the ::before in the class .child-ccc only if the first child has the class .hovered?

Here is the HTML output:

<div class="parent">
    <div class="child hovered">
        <div class="child-aaa"></div>
        <div class="child-aaa"></div>
    </div>

    <div class="child"></div>

    <div class="child-c">
        <div class="child-ccc">
            ::before
        </div>
    </div>
</div>

I have tried .child:first-child.hovered + .child-c .child-ccc:before

Solution

The + selector only selects adjacent siblings but child-c isn't. So, you have to use ~.

.parent .child:first-child.hovered~.child-c .child-ccc::before {
  content: '';
  display: block;
  height: 1rem;
  background-color: purple;
}

<div class="parent">
  <div class="child hovered">
    <div class="child-aaa">aaa</div>
    <div class="child-aaa">aaa</div>
  </div>

  <div class="child">bbb</div>

  <div class="child-c">
    <div class="child-ccc">
      ccc
    </div>
  </div>
</div>

Answered By - Ramesh Reddy