Mostra un figlio specifico a un genitore con diversi figli

Question

.titleoptions .ellipses {
  display: none;
}
.titleoptions:hover > .ellipses{
  display: flex;
}

<div class="bg-jibackgroundBlue border-jigreen border-l-8 border-l-solid rounded-md mb-2">
  <div class="flex items-center titleoptions">
    <div class="flex py-3">
      <img class="px-1" src="{{MEDIA_UI}}/icon-chevron-categories-24-px-active.svg" alt="">
      <p>{{label}}</p>
    </div>
    <div class="flex mr-2 relative pl-2">
      <div class="ellipses">
      <!--Find a way to change color of ellipses when hover -->
        <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
        <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
        <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
      </div>
      <div class="absolute p-2 z-40 dropdown hidden">
        <ul class="bg-white rounded-md shadow-md w-112 py-3">
          <li class="hover:bg-jibackgroundBlue">
            <a class="px-3" href="#">Add a child</a>
          </li>
          <li class="hover:bg-jibackgroundBlue">
            <a class="p-3" href="#">Rename</a>
          </li>
          <li class="hover:bg-jibackgroundBlue">
            <a class="p-3" href="#">Delete</a>
          </li>
          <li class="hover:bg-jibackgroundBlue">
            <a class="p-3" href="#">Hide</a>
          </li>
        </ul>
      </div>

    </div>

  </div>
  <!--subcategory-->
  <ul class="px-14 ml-16 pb-1 ">
    <li class="relative titleoptions">
      <div class="flex items-center">
  {{label}}
        <div class="absolute border-l border-b border-jiblueLight w-6 h-6 spacer">
        </div>
        <div class="flex mr-2 relative pl-2">
          <div class="ellipses">
          <!--Find a way to change color of ellipses when hover -->
            <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
            <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
            <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
          </div>
          <div class="absolute p-2 hidden dropdown">
            <ul class="bg-white rounded-md shadow-md w-112 py-3 font-normal">
              <li class="hover:bg-jibackgroundBlue">
                <a class="px-3" href="#">Add a child</a>
              </li>
              <li class="hover:bg-jibackgroundBlue">
                <a class="p-3" href="#">Rename</a>
              </li>
              <li class="hover:bg-jibackgroundBlue">
                <a class="p-3" href="#">Delete</a>
              </li>
              <li class="hover:bg-jibackgroundBlue">
                <a class="p-3" href="#">Hide</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <ul class="px-14 ml-16 pb-1 mt-2">
        <li class="relative titleoptions">
          <div class="flex items-center">
      {{label}}
          <div class="absolute border-l border-b border-jiblueLight w-6 h-6 spacer">
          </div>
          <div class="flex mr-2 relative pl-2">
            <div class="ellipses">
            <!--Find a way to change color of ellipses when hover -->
              <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
              <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
              <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
            </div>
            <div class="absolute p-2 hidden dropdown">
              <ul class="bg-white rounded-md shadow-md w-112 py-3 font-normal">
                <li class="hover:bg-jibackgroundBlue">
                  <a class="px-3" href="#">Add a child</a>
                </li>
                <li class="hover:bg-jibackgroundBlue">
                  <a class="p-3" href="#">Rename</a>
                </li>
                <li class="hover:bg-jibackgroundBlue">
                  <a class="p-3" href="#">Delete</a>
                </li>
                <li class="hover:bg-jibackgroundBlue">
                  <a class="p-3" href="#">Hide</a>
                </li>
              </ul>
            </div>
          </div>

        </li>
        <li class="relative titleoptions flex items-center">{{label}}
          <div class="absolute border-l border-b border-jiblueLight w-6 h-6 spacer">
          </div>
          <div class="flex mr-2 relative pl-2">
            <div class="ellipses">
            <!--Find a way to change color of ellipses when hover -->
              <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
              <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
              <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
            </div>
          
          </div>
        </li>
      </ul>
    </li>
    <li class="relative titleoptions flex items-center">{{label}}
      <div class="absolute border-l border-b border-jiblueLight w-6 h-6 spacer">
      </div>
      <div class="flex mr-2 relative pl-2">
        <div class="ellipses">
        <!--Find a way to change color of ellipses when hover -->
          <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
          <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
          <div class="bg-jibluelighter dots rounded-full h-2 w-2 mr-1"></div>
        </div>
        <div class="absolute p-2 hidden dropdown">
     
        </div>
      </div>
    </li>
  </ul>
</div>

Sto creando un albero e voglio che il div con la classe chiamata ellissi venga visualizzato quando passo il mouse sopra il div con class titleoption. Alcuni dei titoli avranno figli che hanno tutti lo stesso nome di classe e lo stesso stile, ma voglio solo che il bambino in particolare venga visualizzato al passaggio del mouse e non tutti i bambini. Come posso realizzare questo?

Answer 1

Puoi farlo in molti modi ovviamente. Come dare a ogni bambino un nome o un ID specifico, ma se non vuoi farlo, puoi semplicemente usare il :nth-of-type(n)selettore. Ad esempio, vuoi il terzo di questo tipo:

.titleoptions .ellipses:nth-of-type(3) {
  display: none;
}
.titleoptions:hover > .ellipses:nth-of-type(3){
  display: flex;
}

Answer 2

Stai selezionando la .ellipsesclasse solo se è un discendente diretto di .titleoptions.

.titleoptions:hover > .ellipses{
  display: flex;
}

Rimuovi il selettore combinatore figlio >:

.titleoptions:hover .ellipses{
  display: flex;
}