티스토리 뷰

웹디자인/CSS3

CSS3 구조선택자

YJHOON YHun 2015.04.24 09:59

구조선택자는 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>

댓글
댓글쓰기 폼
공지사항
Total
218,661
Today
148
Yesterday
363
링크
TAG
more
«   2018/08   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
글 보관함