웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)

disabled - 비활성요소 선택자 : 사용 불가능한 요소 선택 ex) 사용할수 없는 input 요소 선택 ( 예 : input:disabled ) 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 :disabled input[type="text"]:enabled { background:#ffff00; } input[type="text"]:disabled { background:#dddddd; } :disabled 사용 불가능한 요소 선택 First name: Last name: 사용불가 :

:enabled : 사용가능한 요소 선택 ex) 사용가능한 input 요소를 선택 ( 예 : input:enabled ) :enabled input:enabled{background:#ffff00;}input[type="text"]:disabled{background:#dddddd;} :enabled 사용 가능한 요소 선택 First name: Last name: etc :

target - 활성요소 선택자 : 앵커 이름을 포함하는 URL를 클릭 했을때 활성화된 요소를 선택 ex) a태그의 링크가 활성화 됫을때 활성화된 id를 활성화 ( 예 - :target ) 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 :target :target { border: 2px solid #D4D4D4; background-color: #e5eecc; } :target 앵커 이름을 포함하는 URL를 클릭 했을때 활성화된 요소를 선택 test 1 test 2 Click Anchor. content 1... content 2...

empty - 빈 요소 선택자 : (텍스트포함)안이 텅빈 요소 노드 선택 ex) 텅빈 p 요소 선택 ( 예 : p:empty ) 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 :empty p:empty { width:100px; height:20px; background:#ffff00; } :empty (텍스트포함)안이 텅빈 요소 노드 선택 test1 test2 test3

:root - 최상위 엘리먼트 선택자 : 문서의 루트 요소 선택(html) ex) 문서의 최상위 엘리먼트인 html 선택( 예 - :root ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 :root :root { background:#ffff00; } :root 문서의 루트 요소 선택(html) 문서의 최상위 엘리먼트 노드 선택

last-child - 자식 선택자 : 부모로 부터 마지막 요소를 찾는다. ex) 부모로 부터 마지막 p 요소 선택 ( 예 : p:last-child ) 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 32 :last-child p:last-child { background:#ffff00; } :last-child 부모로 부터 마지막 요소를 찾는다. body로 첫번째 자식요소 p body로 두번째 자식요소 p body로 세번째 자식요소 p div로 부터 첫번째 자식인 p div로 부터 두번째 자식인 p div로 부터 세번째 자식인 p div로 부터 네번째 마지막 자식인 p body로 네번째 마지막 자식요..

nth-last-of-type(n) - 자식 선택자 : 부모로 부터 지정된 요소와 지정된 값이 일치하는 자식 요소를 뒤에서 부터 찾는다. ex) 부모로 부터 마지막 2번째 p요소들을 찾는다. ( 예 : p:nth-last-of-type(2) ) 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 :nth-last-of-type(n) p:nth-last-of-type(2) { background:#ffff00; } :nth-last-of-type(n) 부모로 부터 지정된 요소와 지정된 값이 일치하는 자식 요소를 뒤에서 부터 찾는다. body로 첫번째 자식요소인 p body로 두번째 자식요소 이면서 뒤에서 부터 두번..

nth-of-type(n) - 자식 선택자 : 부모로 부터 지정된 요소와 지정된 값이 일치하는 요소를 찾는다. ex) 부모로 부터 세번쩨 자식인 p 요소 선택 ( 예 : p:nth-of-type(3) ) 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 :nth-of-type(n) p:nth-of-type(3) { background:#ffff00; } :nth-of-type(n) 부모로 부터 지정된 요소와 지정된 값이 일치하는 자식 요소를 찾는다. body로 첫번째 자식요소인 p body로 두번째 자식요소인 p body로 세번째 자식요소인 p div로 부터 첫번째 자식인 p div로 부터 두번째 자식인 p d..

nth-last-child(n) - 자식 선택자 : 부모 마지막 자식(뒤에서 부터)에서 부터 지정된 값만큼의 자식 요소를 찾는다. ex) 부모로 부터 뒤에서 2번째 자식인 요소 선택 ( 예 : p:nth-last-child(2) ) 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 :nth-last-child(n) p:nth-last-child(2) { background:#ffff00; } :nth-last-child(n) 부모 마지막 자식(뒤에서 부터)에서 부터 지정된 값만큼의 자식 요소를 찾는다. body로 세번째 자식 이면서 마지막 두번째 요소인 p div로 부터 첫번째 자식인 p div로 부터 두번째 자식인 p ..

nth-child(n) - 자식 선택자 : 부모로 부터 지정된 값만큼의 자식 요소를 찾는다. ex) 부모로 부터 3번째 자식인 p 요소를 선택 ( 예 : p:nth-child(3) ) 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 :nth-child(n) p:nth-child(3) { background:#ffff00; } :nth-child(n) 부모로 부터 지정된 값만큼의 자식 요소를 찾는다. body로 세번째 자식인 p div로 부터 첫번째 자식인 p div로 부터 두번째 자식인 p div로 부터 세번째 자식인 p div로 부터 하나인 p