본문 바로가기

웹프로그래밍/CSS

CSS 속성선택자

반응형

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

반응형