Afficher un enfant spécifique à un parent avec plusieurs enfants

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>

Je crée un arbre et je souhaite que la div avec la classe appelée ellipses s'affiche lorsque je survole la div avec l'option de titre de classe. Certains des titres auront des enfants qui ont tous le même nom de classe et le même style, mais je veux seulement que l'enfant en particulier s'affiche en survol et pas tous les enfants. Comment puis-je accomplir cela?

Answer 1

Vous pouvez le faire de plusieurs façons bien sûr. Comme donner à chaque enfant un nom ou un identifiant spécifique, mais si vous ne voulez pas le faire, vous pouvez simplement utiliser le :nth-of-type(n)sélecteur. Par exemple, vous voulez le troisième de ce type :

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

Answer 2

Vous sélectionnez la .ellipsesclasse uniquement si elle est un descendant direct de .titleoptions.

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

Supprimez le sélecteur de combinateur enfant> :

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