Notice
Link
«   2024/03   »
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
Archives
Today
Total
관리 메뉴

interactive

CSS 속성선택자 본문

Design

CSS 속성선택자

동그란우주 2012. 12. 6. 10:58

1. 선택자[속성] , 선택자[속성=값] - 특정한 속성이 있는 태그 선택


img[alt]

img 중에 alt 속성을 가진 것만 찾는다.

input[type=password]

input 중에 type password 인 것만 찾는다.

div#header

아이디가 headerdiv 선택하는 같은 방법이다.

div[id=header] 

div[id="header"] 


2. 선택자[속성~=값] , 선택자[속성|=값] - 속성 안의 값이 특정 값을 단어로 포함하는 문서 객체를 선택(띄어쓰기 포함)


 img[alt~="test"]  <img src="aa.jpg" alt="test photo" /> test 뒤에 띄어쓰기가 있는경우도 찾는다.
 <img src="bb.jpg" alt="camera test" /> test 앞에 띄어쓰기가 있는경우도 찾는다. 
 img[alt|="test"] <img src="aa.jpg" alt="test-photo" /> test 뒤에 - 있는 경우 찾는다.


3. 선택자[속성^=값] , 선택자[속성$=값] , 선택자[속성*=값]


선택자[속성^=값]

속성 중 값으로 시작하는 것 선택

 a[href="http://"]  a(anchor)에 요소 href 중에 속성명이 http:// 로 시작하는 것을 찾는다.

선택자[속성$=값] 

속성 중 값으로 끝나는 것 선택

img[src$=png] img src png로 끝나는 img만 선택

선택자[속성*=값]

속성 중 값을 조금이라도 포함되어있으면 선택

img[alt*=test] img alt 안에 test가 들어간 것 모두 선택




'Design' 카테고리의 다른 글

CSS3 구조선택자  (0) 2012.12.06
CSS 동위선택자, 상태선택자  (0) 2012.12.06
HTML5 비디오태그 <video></video>  (1) 2012.12.05
HTML5 오디오태그 <audio></audio>  (1) 2012.12.05
이미지 대체 사용 팁! placehold.it  (0) 2012.12.05
Comments