가상요소 선택자(Structural pseudo-classes) : 요소에 id나 class명을 부여하지 않고도 위치를 찾아 선택
| 속성 값 | 설명 |
| :first-letter | 요소의 첫 글자 |
| :first-line | 요소의 첫 줄 |
| :first-child | 같은 요소 중 첫번째 요소 |
| :last-child | 같은 요소 중 마지막 요소 |
| :nth-child(n) | 같은 요소 중 앞에서 n번째 요소 |
| :nth-last-child(n) | 같은 요소 중 뒤에서 n번째 요소 |
| :first-of-type | 해당 요소의 부모 요소의 자식 요소 중 첫번째 요소 |
| :last-of-type | 해당 요소의 부모 요소의 자식 요소 중 마지막 요소 |
| :nth-of-type(n) | 해당 요소의 부모 요소의 자식 요소 중 앞에서 n번째 요소 |
| :nth-last-of-type(n) | 해당 요소의 부모 요소의 자식 요소 중 뒤에서 n번째 요소 |
- n은 0부터 시작하는 정수이다.
| n | 2n (짝수) | 2n+1 (홀수) | 2n-1 | 3n-2 | 3n+1 | -n+5 |
| 0 | 0 | 1 | -1 | -2 | 1 | 5 |
| 1 | 2 | 3 | 1 | 1 | 4 | 4 |
| 2 | 4 | 5 | 3 | 4 | 7 | 3 |
| 3 | 6 | 7 | 5 | 7 | 10 | 2 |
| 4 | 8 | 9 | 7 | 10 | 13 | 1 |
| 5 | 10 | 11 | 9 | 13 | 16 | 0 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>가상요소선택자</title>
<style>
p:first-child{color: fuchsia;} /* p 요소 중에서 첫번째 자식 선택 */
p:last-child{color: coral} /* p 요소 중에서 마지막 자식 선택 */
/* body 요소의 마지막 자식 요소는 div이다.*/
ol>li:nth-child(2n){color: blue} /*ol li 중에서 짝수 선택자 (0, 2의 배수)*/
ol>li:nth-child(2n+1){color: darkgoldenrod} /*ol li 중에서 홀수 선택자 (0, 2의 배수)+1 */
ol>li:first-child{background-color: skyblue} /*ol li 중에서 첫번째 요소 선택 */
ol>li:last-child{background-color: lemonchiffon} /*ol li 중에서 마지막 요소 선택 */
ol>li:nth-child(4){background-color: lightgray} /*ol li 중에서 4번째 요소 선택 */
ul>li:nth-last-child(2n+1){color: palevioletred} /* ul li 중에서 마지막에서 시작하여 홀수번째 요소 선택*/
ul>li:nth-last-child(2n){color: yellowgreen} /* ul li 중에서 마지막에서 시작하여 짝수번째 요소 선택*/
</style>
</head>
<body>
<p>이 단락은 body의 첫번째 자식입니다.</p>
<h1>Welcome</h1>
<p>이 단락은 body의 첫번째 자식이 아닙니다.</p>
<div>
<p>이 단락은 div의 첫번째 자식입니다.</p>
<p>이 단락은 div의 첫번째 자식이 아닙니다.</p>
</div>
<ol>
<li>Espreso</li>
<li>Americano</li>
<li>Caffe Latte</li>
<li>Caffe Mocha</li>
<li>Caramel Latte</li>
<li>Cappucino</li>
</ol>
<ul>
<li>Espreso</li>
<li>Americano</li>
<li>Caffe Latte</li>
<li>Caffe Mocha</li>
<li>Caramel Latte</li>
<li>Cappucino</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>가상요소선택자2</title>
<style>
p:first-of-type{color: red} /* p 요소의 부모 요소의 자식 요소 중 첫번째 p 요소 선택 */
p:last-of-type{color: blue} /* p 요소의 부모 요소의 자식 요소 중 마지막 p 요소 선택 */
p:nth-of-type(2){color: green} /* p 요소의 부모 요소의 자식 요소 중 앞에서 두번째 p 요소 선택 */
p:nth-last-of-type(2){color: orange} /* p 요소의 부모 요소의 자식 요소 중 뒤에서 두번째 p 요소 선택 */
p:first-child{background-color: lightblue} /* p 요소 중에서 첫번째 자식 선택*/ /* 없음 */
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<div>
<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| CSS-Font & Text 2 (0) | 2020.08.11 |
|---|---|
| CSS-Font & Text (0) | 2020.08.10 |
| CSS-선택자(selector)3 : 가상클래스/UI 요소 상태 선택자 (0) | 2020.08.07 |
| CSS-선택자(selector)2 : 속성선택자 (0) | 2020.08.07 |
| CSS-선택자(selector) (0) | 2020.08.06 |
댓글