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가 들어간 것 모두 선택