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

 

 

 

😎 속성선택자

 

작업 중에 요긴하게 사용하였다.

 

 

#root .sample a[href*="test"] {
    background: #fddd00;
    display: block;
  }




  #root .sample a img[src*="test"] {
    width: 65%;
    margin-left: 17%;
  }

 

 

다른 태그들과는 구분되도록 별도로 추가 작업을 해주어야 하는 엘리먼트가 있었다...😅

다행히도 속성선택자를 활용해서

미약하게나마 작업을 일단은... 완료할 수 있었다😏

 

 

사용법은 제일 상단 안내글들과 내가 사용한 코드를
꼭 잊지 말고 다시 활용하도록 하자!