Is it possible to set a unique background color for the first child in a nested collapsible list using css?

  css, html, javascript

I have the following nested list (I omit the other first level li’s for convenience):

    <ul>
      <li class="collapsible active">
        <i class="fas"></i><a href="#">item 1 </a>
        <ul class="collapsible__content">
          <li><a href="#"> item 2 </a></li>
          <li><a href="#"> item 3 </a></li>
        </ul>
      </li>
    </ul>

I want item 1 to have a different background color when its container li element is active, but I don’t want the other nested li elements to have the same color when they are expanded. I tried to set a different background color for the class "collapsible__content" and overwrite it in response of the hover effect. However, the very outside margin cannot be wiped out.

And a related question would be to highlight only the nested li element, as it should always have that annoying margin.

Is this achievable in CSS? (If not, Javascript code can also be helpful.)

Source: Ask Javascript Questions

LEAVE A COMMENT