Notice
Link
«   2024/04   »
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
Archives
Today
Total
관리 메뉴

interactive

CSS 동위선택자, 상태선택자 본문

Design

CSS 동위선택자, 상태선택자

동그란우주 2012. 12. 6. 11:42

1. 동위선택자

 선택자 형태

설명 

 선택자A + 선택자B 

선택자A 바로 뒤에 위치하는 선택자B 선택 

 선택자A ~ 선택자B 

선택자A뒤에 위치하는 선택자B 선택 


<style type="text/css">

h1+h2{color:red}

h1~h2{background-color:orange}

</style>


<h1>header-1</h1>

<h2>header-2</h2>

<h2>header-3</h2>

<h2>header-4</h2> 
 



2. 상태선택자 : 입력양식의 상태를 선택할때 사용하는 선택자

  선택자 형태

설명 

 :checked 

체크상태의 input 태그 선택

 :focus

초점이 맞추어진 input 태그 선택

 :enabled

사용가능한 input 태그 선택 

 :disabled 

사용 불가능한 input 태그 선택 



'Design' 카테고리의 다른 글

[CSS3] background 중첩 사용  (0) 2012.12.10
CSS3 구조선택자  (0) 2012.12.06
CSS 속성선택자  (0) 2012.12.06
HTML5 비디오태그 <video></video>  (1) 2012.12.05
HTML5 오디오태그 <audio></audio>  (1) 2012.12.05
Comments