interactive
CSS3 구조선택자 본문
구조선택자는 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> |
'Design' 카테고리의 다른 글
| 반응형 웹 - 뷰포트와 미디어쿼리 (viewport , mediaquery) (2) | 2015.02.27 |
|---|---|
| [CSS3] background 중첩 사용 (0) | 2012.12.10 |
| CSS 동위선택자, 상태선택자 (0) | 2012.12.06 |
| CSS 속성선택자 (0) | 2012.12.06 |
| HTML5 비디오태그 <video></video> (1) | 2012.12.05 |
