속성 선택자 (속성 ~=값,속성 |=값, 속성 ^=값, 속성 $=값, 속성 *=값)

속성 선택자 - 지정한 속성으로 찾아내서 스타일을 적용하는 선택자

 

[속성=값] 선택자

특정 값을 갖고 있는 속성에 스타일을 적용

a[target="_blank"]{} /* a태그의 속성과 값이 일치하는 경우에 적용한다.*/

 

---

 

[속성 ~=값] 선택자

특정 값이 포함된 속성에 스타일을 적용

[class ~="button"]{} /* 클래스에 button이 적용된 엘리먼트 */

class="button" 이렇게 완전히 값이 일치하거나

class="inline button" 여러 개의 속성 값 중 포함되어있어도 적용된다.

단, class="button-top" 이런식으로 일부만 일치할 경우에는 적용되지 않는다.

 

---

 

[속성 |=값] 선택자

특정 값이 포함된 속성에 스타일을 적용

a[title |="desc"]{}/* title 속성에 desc이거나 desc-로 시작하는 요소*/

<a title="desc"> 이거나

<a title="desc-mobile"> desc- 이렇게 시작되는 경우 스타일을 적용한다.ㅔ

 

---

 

 

[속성 ^=값] 선택자

특정 값으로 시작하는 속성에 스타일 적용

a[title ^="con"]{} /* con으로 시작되는 경우 */

 

<a title="con"> 이거나

<a title="contents"> 처럼 con으로 시작되는 경우 스타일을 적용한다.

 

---

 

[속성 $=값] 선택자

특정 값으로 끝나는 속성에 스타일 적용

a[href $= "jpg"]/*jpg로 끝나는 속성*/

확장자에 보통 많이쓴다.

 

[속성 *=값] 선택자

값의 일부가 일치하는 속성에 스타일 적용

[href *= "html"] /* html이 들어간 경우 */

속성 값에 html이라는 단어만 들어가면 어느 위치든 상관없이 스타일 적용 가능하다.