Add a class to parent element when child element attribute aria expanded is true-CodePudding

I need to give the first div a grey background when the dropdown is open. I've been able to apply css depending on the a tag's aria-expanding for the child elements but I'm not sure how to do that for a parent element. I'm using Vue so I don't want to use any Jquery.

            <li v-for="(item, index) in locations" :key="index">
              <div id="active-hov-div">
                <a
                  id="brand-nav-item-link-id"
                  class="brand-nav-item-link"
                  type="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                >
                  <label class="active-hov">
                    {{item.label}}
                  </label>
                    <i class="fa fa-sort-down test-down"></i>
                    <i class="fa fa-sort-up test-up"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-end locations-ul">
                  <li class="locations-li">
                    <FindACommunity />
                  </li>
                  <ul class="locations-dropdown-ul">
                  <li v-for="(item3, index3) in item.locationsTitles" :key="index3" class="nav-item" style="padding-bottom: 8px">
                    <a class="brand-nav-dropdown-link" :href="item3.url">{{item3.title}}</a>
                  </li>
                  </ul>
                </div>
              </div>
            </li>

CodePudding user response：

Did you try the :first-child?

https://www.w3schools.com/cssref/sel_firstchild.asp

CodePudding user response：

May be you can use the index in you v-for and define the gray-bg at your styles, then use the index === 0 to deside if is needed to show the gray background ,I hope it can work for you

<template>
<!-- ... -->
    <li v-for="(item, index) in locations" :key="index">
        <div id="active-hov-div" :class="{'gray-bg':index === 0}">
            <a
                id="brand-nav-item-link-id"
                class="brand-nav-item-link"
                type="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
            >
                <label class="active-hov">
                    {{item.label}}
                </label>
                <i class="fa fa-sort-down test-down"></i>
                <i class="fa fa-sort-up test-up"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-end locations-ul">
    <li class="locations-li">
        <FindACommunity />
    </li>
    <ul class="locations-dropdown-ul">
        <li v-for="(item3, index3) in item.locationsTitles" :key="index3" class="nav-item" style="padding-bottom: 8px">
            <a class="brand-nav-dropdown-link" :href="item3.url">{{item3.title}}</a>
        </li>
    </ul>
    </div>
    </div>
    </li>
<!-- ... -->
</template>

<style>
/*...*/
 .gray-bg {
     background-color: gray;
 }
/*...*/
</style>