선택자

자식셀렉터

 div > span > input.form_control { 
    ... 
}

<div>
	<span>
    	<input class="form_control" />
	</span>
 </div>

---

 

자손셀렉터

- 계층구조 공백으로 표현

- 순차적일 필요 없다

div span input.form_control { 
    ... 
}

<div> 
    ... ? ... 

	 <span> ...?... 
     	<input class="form_control" /> ...?... 
	</span> 
    ... ? ... 
</div>

---

속성셀렉터

a[href]	href 속성을 갖는 a태그
a[href="#"]	href 속성값이 "#"인 a태그
#hello[method="post"]	method속성값이 "post"인 id가 hello인 태그

---

 

가상클래스

a:link { ... } 
a:visited { ... } 
a:hover { ... } 
a:active { ... }

---

 

n번째 요소

 

:first-child

:last-child

:nth-child(2)

 

:nth-child(odd)

:nth-child(2n)

:nth-child(3n)

:nth-last-child(숫자)    뒤에서부터 요소 카운트