목록분류 전체보기 (208)
웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)
28. only-of-type - 자식 선택자
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
27. last-of-type - 자식 선택자
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
26. first-of-type - 자식 선택자
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
25.attribute*=value
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
24. attribute$=value
attribute$=value - 속성 값 선택자 : 속성의 값이 value 로 끝나는 요소들의 집합 ex) div 의 class 의 값이 test로 끝나는 요소들의 집합 ( 예 : 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 [attribute$=value] div[class$="test"] { background:#ffff00; } [attribute$=value] 속성의 값이 value 로 끝나는 요소들의 집합 first_test second second test01 test02 test03
23.[attribute^=value] - 속성 값 선택자
[attribute^=value] - 속성 값 선택자 : 지정된 속성의 값이 value 로 시작하는 단어들의 집합 ex) div 의 클래스 속성이 test 로 시작 하는 단어들 의 집합 ( 예 : 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 [attribute^=value] div[class^="test"] { background:#ffff00; } [attribute^=value] 속성의 값이 value 로 시작하는 요소들의 집합 first_test second test test01 test02
22. element1~element2 - 인접 형제 선택자
element1~element2 - 인접 형제 선택자 : 요소 다음에 나오는 요소들의 집합 ex) p 다음에 나오는 형제 ul 태그들의 집합 ( 예 : p ~ ul ) 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 33 34 element1~element2 p ~ ul { background:#ff0000; } element1 ~ element2 요소 다음에 나오는 요소들의 집합 p 요소 이전 리스트 아이템 1 p 요소 이전 리스트 아이템 2 p요소 p 요소 이후 리스트 아이템 1 p 요소 이후 리스트 아이템 2 p 요소 이후 리스트 아이템 3 p 요소 이후 리스트 아이템 4
21. lang(language) - 가상 선택자
:lang(language) - 가상 선택자 : 지정된 요소 중 언어가 괄호 안의 지정된 언어로 시작되는 요소를 선택 ex) p 요소의 lang 속성이 한국어 인것을 선택 ( 예 : p:lang(ko) ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 :lang(language) p:lang(ko) { background:yellow; } :lang(language) 가상 선택자 – 지정된 요소 중 언어가 괄호 안의 지정된 언어로 시작되는 요소를 선택 지정하지 않음 한국어 English Italy
20. :after - 가상 선택자
:after - 가상 선택자 : 지정된 요소의 뒷 부분을 선택 ex) p요소의 뒷 부분을 선택 컨텐츠를 추가 ( 예 : p:after ) 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 :after p:after { content:" - Remember this "; color:red; } :after 가상 선택자 – 지정된 요소의 뒷 부분을 선택 첫번째 p요소 첫번째 p요소 두번째 p요소 두번째 p요소
19. :before - 가상 선택자
:before - 가상 선택자 : 지정된 요소의 앞부분을 선택 ex) p요소의 앞부분에 컨텐츠 추가 ( 예 : p:before ) 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 :before p:before { content:"Read this - "; color:red; } :before 가상 선택자 – 지정된 요소의 앞 부분을 선택 첫번째 p요소 첫번째 p요소 두번째 p요소 두번째 p요소