구조 선택자
구조 선택자
· 인라인형 요소는 적용 안된다.
· ul li 태그에서 특정한 위치에 있는 li 요소를 선택할 때 사용한다.
① :first-child - li 요소 중 처음에 있는 li요소를 선택한다.
② :last-child - li 요소 중 맨 나중에 있는 li 요소를 선택한다.
③ :nth-child(수열) - 수열에 해당하는 li요소를 선택한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=], initial-scale=1.0">
<title>구조선택자</title>
<style>
* {margin:0; padding:0;}
/* 박스의 여백을 초기화한다. */
li {height:50px; list-style: none;}
li:first-child {background:orange;}
li:last-child {background:olive;}
li:nth-child(2) {background:orchid;}
li:nth-child(3) {background:red;}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">menu01</a></li>
<li><a href="#">menu02</a></li>
<li><a href="#">menu03</a></li>
<li><a href="#">menu04</a></li>
</ul>
</body>
</html>
'국비지원 JAVA 풀스택 과정 > HTML+CSS3' 카테고리의 다른 글
| [HTML+CSS3] 박스속성 (0) | 2022.09.27 |
|---|---|
| [HTML+CSS3] 반응선택자 (0) | 2022.09.27 |
| [HTML+CSS3] 형제선택자 (0) | 2022.09.27 |
| [HTML+CSS3] 상태 선택자, 속성 선택자 (0) | 2022.09.26 |
| [HTML+CSS3] 자식+후손 선택자 (0) | 2022.09.26 |