[HTML&CSS] 선택자 연습
2020. 11. 30. 18:26ㆍHTML&CSS&JavaScript
body > ul : 직속 자식
body ul : 많은 후손들 중 하나
<HTML>
<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><CSS>
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개 */ }'HTML&CSS&JavaScript' 카테고리의 다른 글
| 20.12.03 HTML&CSS 반응형 레이아웃 연습 (0) | 2020.12.03 |
|---|---|
| 20.11.30 풀 다운 메뉴 v3 만들기 4 (0) | 2020.11.30 |
| [HTML&CSS] position (0) | 2020.11.30 |
| [HTML&CSS] h1, h2.... (0) | 2020.11.27 |
| [HTML&CSS] ul, ol, li (0) | 2020.11.27 |