interactive
CSS 속성선택자 본문
1. 선택자[속성] , 선택자[속성=값] - 특정한 속성이 있는 태그 선택
img[alt] |
img 중에 alt 속성을 가진 것만 찾는다. |
input[type=password] | input 중에 type이 password 인 것만 찾는다. |
div#header |
아이디가 header 인 div 선택하는 같은 방법이다. |
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