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

: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

only-of-type - 자식 선택자 : 부모로 부터 지정된 요소를 오직 하나만 갖고 있는 요소의 집합 ex) 부모로 부터 p 요소를 하나만 가지고고 있는 요소 선택 ( 예 : p:only-of-type ) 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 :only-of-type p:only-of-type { background:#ffff00; } :only-of-type 부모로 부터 지정된 요소를 오직 하나만 갖고 있는 요소의 집합 body로 부터 하나인 p div로 부터 첫번째 p div로 부터 두번째 p div로 부터 세번째 p div로 부터 하나인 p

last-of-type - 자식 선택자 : 부모로 부터의 마지막 자식 요소 선택 ex ) 부모로 부터 마지막 p 요소 선택 ( 예 : p:last-of-type ) 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 :last-of-type p:last-of-type { background:#ffff00; } :last-of-type 부모로 부터 마지막 자식 요소 선택 body로 부터 첫번째 p body로 부터 두번째 p body로 부터 세번째 p div로 부터 첫번째 p div로 부터 두번째 p div로 부터 세번째 p

first-of-type - 자식 선택자 : 부모로 부터 첫 번째 자식 요소 선택 ex) 모든 부모로 부터의 첫번째 p 인 요소를 선택 ( 예 : p:first-of-type ) 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 :first-of-type p:first-of-type { background:#ffff00; } :first-of-type 부모의 첫 번째 p 요소 인 모든 p 요소를 선택 body로 부터 첫번째 p body로 부터 두번째 p body로 부터 세번째 p div로 부터 첫번째 p div로 부터 두번째 p div로 부터 세번째 p

attribute*=value - 속성 값 선택자 : 속성의 값이 value 가 포함 되어 있는 요소들의 집합 ex) div의 class 값에 value 가 포함되 있는 요소들의 집합 ( 예: div[class*="test"] ) 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 [attribute*=value] div[class*="test"] { background:#ffff00; } [attribute*=value] 속성의 값이 value 가 포함되 있는 요소들의 집합 first_test second second second second test01 test02 test03