여러 chilrden으로 특정 자식을 부모에게 표시

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>

트리를 만들고 클래스 titleoption으로 div 위로 마우스를 가져 가면 타원이라는 클래스가있는 div가 표시되기를 원합니다. 일부 제목에는 모두 동일한 클래스 이름과 스타일을 가진 하위 항목이 있지만 모든 하위 항목이 아닌 특정 하위 항목 만 마우스 오버시 표시하고 싶습니다. 어떻게해야합니까?

Answer 1

다양한 방법으로 할 수 있습니다. 모든 어린이에게 특정 이름이나 ID를 부여하는 것과 비슷하지만 그렇게하지 않으려면 :nth-of-type(n)선택기 를 사용하면됩니다 . 예를 들어,이 유형의 세 번째를 원합니다.

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

Answer 2

.ellipses의 직계 자손 인 경우에만 클래스를 선택합니다 .titleoptions.

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

하위 조합 선택기 제거 >:

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