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>