CSS 선택자 찾기 연습

 

<h1>요구 : CSS 선택자로 검색되는 엘리먼트 개수를 주석에 적어주세요.</h1>

<!--
.menu-1>ul>li*2>a[href=#]{1차 메뉴 아이템 $}+ul>li*2>a[href=#]{2차 메뉴 아이템 $}
-->
<nav class="menu-1">
  <ul>
    <li>
      <a href="#">1차 메뉴 아이템 1</a>
      <ul>
        <li><a href="#">2차 메뉴 아이템 1</a></li>
        <li><a href="#">2차 메뉴 아이템 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">1차 메뉴 아이템 2</a>
      <ul>
        <li><a href="#">2차 메뉴 아이템 1</a></li>
        <li><a href="#">2차 메뉴 아이템 2</a></li>
      </ul>
    </li>
  </ul>
</nav>

 

 

 

 

 

문제 선택자를 찾아 갯수를 써주세요

html { /* 개 */ }
body { /* 개 */ }
html body { /* 개 */ }
html > body { /* 개 */ }
html, body { /* 개 */ }
ul { /* 개 */ }
body > ul { /* 개 */ }
body ul { /* 개 */ }
body > nav > ul { /* 개 */ }
body > nav ul { /* 개 */ }
body > nav.menu-1 ul { /* 개 */ }
body > nav.menu-1 ul ul { /* 개 */ }
body > nav.menu-1 ul ul ul { /* 개 */ }
body > nav.menu-1 li { /* 개 */ }
body > nav.menu-1 li li { /* 개 */ }
body > nav.menu-1 > ul { /* 개 */ }
body > nav.menu-1 > ul li { /* 개 */ }
body > nav.menu-1 > ul > li { /* 개 */ }
body > nav.menu-1 > ul > li a { /* 개 */ }
body > nav.menu-1 > ul > li > a { /* 개 */ }
body > nav.menu-1 li > a { /* 개 */ }
body > nav.menu-1 li:hover > a { /* 개 */ }
body > nav.menu-1 li > ul { /* 개 */ }
body > nav.menu-1 li:hover > ul { /* 개 */ }

 

 

 

 

정답

 

html { /* 1개 */ }
body { /* 1개 */ }
html body { /* 1개 */ }
html > body { /* 1개 */ }
html, body { /* 2개 */ }
ul { /* 3개 */ }
body > ul { /* 0개 */ }
body ul { /* 3개 */ }
body > nav > ul { /* 1개 */ }
body > nav ul { /* 3개 */ }
body > nav.menu-1 ul { /* 3개 */ }
body > nav.menu-1 ul ul { /* 2개 */ }
body > nav.menu-1 ul ul ul { /* 0개 */ }
body > nav.menu-1 li { /* 6개 */ }
body > nav.menu-1 li li { /* 4개 */ }
body > nav.menu-1 > ul { /* 1개 */ }
body > nav.menu-1 > ul li { /* 6개 */ }
body > nav.menu-1 > ul > li { /* 2개 */ }
body > nav.menu-1 > ul > li a { /* 6개 */ }
body > nav.menu-1 > ul > li > a { /* 2개 */ }
body > nav.menu-1 li > a { /* 6개 */ }
body > nav.menu-1 li:hover > a { /* 0개 */ }
body > nav.menu-1 li > ul { /* 2개 */ }
body > nav.menu-1 li:hover > ul { /* 0개 */ }