목록css3/selector (40)
웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)
[attribute|=language] - 속성 값 선택자 : 지정된 속성에 지정된 단어로 시작되는 요소를 모두 선택 ex) p 태그에 lang 속성이 en 으로 시작하는 요소를 모두 선택 ( 예 : [lang|=en] ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 [attribute|=language] [lang|=en]{ background:yellow; } 속성 값 선택자 지정된 속성에 지정된 단어로 시작되는 요소를 모두 선택 Hello! Hi! Ello! Hi! Hei!
attribute~=value - 속성 값 선택자 : 지정된 속성에 지정된 값이 포함된 요소를 모두 선택 ex) a태그에 title 속성값에 ho 단어가 포함된것들을 선택 ( 예 : [title~=ho] ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 [attribute~=value] [title~=ho]{ background:yellow; } 속성 값 선택자 지정된 속성에 지정된 값이 포함된 요소를 모두 선택 daum jokack01.tistory.com naver
[attribute=value] - 속성 값 선택자 : 지정된 속성의 값을 가진 요소를 모두 선택 ex) a 태그의 target 속성이 _blank 인것을 선택 ( 예 : a[target=_blank] ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 a[target=_blank] a[target=_blank]{ background-color:yellow; } 속성 값 선택자 지정된 속성의 값을 가진 요소를 모두 선택 daum jokack01.tistory.com naver
attribute - 속성 선택자 : 지정된 속성 가진 요소를 모두 선택 ex) 지정된 속성 가진 요소를 모두 선택 ( 예 : a[target] ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 [attribute] a[target] { background-color:yellow; } 속성 선택자 지정된 속성 가진 요소를 모두 선택 daum jokack01.tistory.com naver
element + element -인접 선택자 : 지정된 요소와 같은 레벨의 바로 다음 요소 선택 ex) div 가 끝난후 바로 다음에 나오는 p 요소만을 선택 ( 예 : div + p ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 element + element div + p { background-color:yellow; } 인접 선택자 지정된 요소와 같은 레벨의 바로 다음 요소 선택 test1 div 가 끝난후 바로 다음에 나오는 p 요소만을 선택 test2 test3
element>element - 자식 선택자 : 지정된 상위 요소 바로 아래의 지정된 하위 요소만 선택 ex) div 바로 다음에 나오는 p 요소들을 선택 ( 예 : div > p ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 element > element div > p { background-color:yellow; } 자식 선택자 지정된 상위 요소 아래의 지정된 하위 요소 선택 div 안에서 div 다음에 나오는 p 요소들의 집합을 선택한다. test1 test2 test3 test4
element element - 자손 선택자 : 지정된 상위 요소 아래의 지정된 모든 하위 요소 선택 ex) div 안에 모든 p 요소들을 선택 ( 예 : div p ) 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 element element div p { background-color:yellow; } 자손 선택자 지정된 상위 요소 아래의 지정된 모든 하위 요소 선택 div 안에 모든 p 요소들을 선택한다. test1 test2 test3
요소 선택자 – 선택할 요소를 여러 개 지정 ex) 여러개 요소를 한번에 지정 같은 스타일을 동시에 줄 수 있다. (예 : h1, div, p, h1, h2, 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 element, element h1, div, p, h1, h2, ul{ background:orange; color:#fff; font-weight:bold; } element, element - 여러개 요소를 선택 예 : div, p, h1, h2... 여러개 요소를 한번에 지정 같은 스타일을 동시에 줄 수 있다. test1 test2 test3
element - 요소선택자 : 지정된 요소를 선택 ex) 해당 요소들의 집합을 선택한다. (예 : 태그선택를 선택한다. - div or span or h1 or h2 or h3.... 기타 등등 ) element - 요소 선택자 h1{color:tan;} p{background-color:yellow;} div{color:red;} 요소 선택자 지정된 div 요소들의 집합 동일한 div element들을 선택한다. p 태그들을 선택 test 1 test 2 test 3
전체 선택자 ( * ) - 모든 요소 선택 ex) 1. 모든 요소에 해당 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 전체 선택자 *{ background-color:yellow; } 전체 선택자 모든요소에 적용 ex) 2. 각 자식 요소의 모든 것에 해당 : element * ( 예 : div * ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 전체 선택자 div *{background-color:yellow;} p *{color:#ff0000;} 요소안에 모든 것에 해당 div 안에 p div 안에 span, 기타... 모든 요소.. p 태그 안에 span, 기타... 모든 요소..