구조선택자는 CSS3에서 추가된 기능이므로 IE8 이하에서는 사용할 수 없다.
1. 일반 구조 선택자
|
선택자 형태 |
설명 |
|
:first-child |
첫번째에 위치하는 자손을 선택 |
|
:last-child |
마지막에 위치하는 자손을 선택 |
|
:nth-child(수열) |
앞에서 수열 번째에 있는 자손을 선택 ex) nth-child(2n) , nth-child(2n+1) |
|
:nth-last-child(수열) |
뒤에서 수열 번째에 있는 자손을 선택 |
|
<style type="text/css"> li{width:100px;list-style:none;padding:10px;} li:first-child{border-radius:10px 10px 0 0;} li:last-child{border-radius:0 0 10px 10px;} li:nth-child(2n){background-color:#f6529d;} li:nth-child(2n+1){background-color:#23c8b6;} </style> <body>
<ul> <li>first</li> <li>second</li> <li>third</li> <li>fourth</li> <li>fifth</li> <li>sixth</li> <li>seventh</li> </ul> </body> |
|
2. 형태 구조 선택자
|
선택자 형태 |
설명 |
|
:first-of-type |
자손 중에 첫번째로 등장하는 특정태그 |
|
:last-of-type |
자손 중에 마지막으로 등장하는 특정태그 |
|
:nth-of-type(수열) |
자손 중에 앞에서 수열 번째로 등장하는 특정 태그 선택 |
|
:nth-last-of-type(수열) |
자손 중에 뒤에서 수열 번째로 등장하는 특정 태그 선택 |
|
<style type="text/css"> h1:first-of-type{color:red;} h2:first-of-type{color:red;} h3:last-of-type{color:blue;} </style> <body> <h1>header 1</h1> <h2>header 2</h2> <h3>header 3</h3> <h3>header 3</h3> <h2>header 2</h2> <h1>header 1</h1> </body> |
'웹프로그래밍 > CSS' 카테고리의 다른 글
| CSS3 for IE7, 8 {https://github.com/scottjehl/Respond/} (0) | 2015.04.27 |
|---|---|
| Background-size for IE7,8 (0) | 2015.04.24 |
| CSS 동위선택자, 상태선택자 (0) | 2015.04.24 |
| CSS 속성선택자 (0) | 2015.04.24 |
| How to Enable CSS3 Border Radius in Internet Explorer 8 and below (0) | 2015.04.21 |