목록css3/selector (40)
웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)
::selection - 영역 선택자 : 사용자가 드래그한 영역을 표시 ex ) 사용자가 드래그한 영역을 노란색으로 표시 ( 예 - ::selection ) 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 ::selection ::selection { background:#ffff00; } ::selection 사용자가 드래그한 영역을 표시 드래그 해 보세요~ 드래그 해 보세요~ 드래그 해 보세요~ 드래그 해 보세요~ 드래그 해 보세요~ 드래그 해 보세요~ 드래그 해 보세요~ 드래그 해 보세요~ 드래그 해 보세요~
not(selector) : 선택한 요소가 아닌 요소들을 선택 ex) p태그가 아닌 요소들을 선택( 예 : :not(p) ) :not(selector) p{color:#000000;} :not(p){color:#ff0000;} :not(selector) 선택한 요소가 아닌 요소들을 선택 div 1 p태그 1 p태그 2 div 2 p태그 3 div 3
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..