[tip] css로 속성 선택하기 (문자열 일치)

 css를 사용하다보면 디테일하게 속성을 선택해야하는 상황이 있습니다. scss를 쓰는 방법 외에 css 상에서 쓸 수 있는 방법이 있는데 바로 css 속성 다중 선택(하위 문자열 일치 속성 선택)입니다. 

예를 들어 class명이 box로 시작되는 div의 텍스트 색상 값을 바꿔야 하는 작업이 있을 경우,

 

<div class="box-1">text</div>
<div class="box-2">text</div>
<div class="box-3">text</div>
<div class="box-4">text</div>
<div class="boxs-1">text</div>
<div class="boxs-2">text</div>
<div class="boxs-3">text</div>
<div class="boxs-4">text</div>

 

css로 div값을 잡고 작업을 해도 되고 class명을 추가하는 방법이 있지만 div가 중복이 되거나 class명을 추가할 수 없는 경우에는 아래 내용으로 작업할 수 있습니다.

 

div[class*="box-"] {
	color:blue;
}

해당 css를 기입할 경우, class명이 box-로 있는 div들만 선택되게 됩니다.

 

 

 

이와 같은 방법으로 여러가지 응용을 통해 작업할 수 있는데, 기본 구문은 [att*=val]로 보시면 됩니다. 

 

[att*=val]
[속성*=문자열]

 

비슷한 속성 값으로는, [att^=val]과 [att$=val] 이 있는데, 각각 사용하는 방법이 다릅니다.

 [att^=val]는 문자열(val)이 시작하는 요소를 선택하게 해주는데, 보통 href 링크 속성값 때 많이 쓰입니다. 대표적인 예로는 아래와 같습니다.

 

a[href^="http://www.domain.com"], a[href^="http://domain.com"] {
  color: blue;
}

 

[att$=val]는 [att^=val]와 반대로 문자열(val)이 끝나는 요소를 선택하게 해줍니다. 대표적인 예로는 아래와 같습니다.

 

a[href$=".pdf"] {
  background: url(../images/pdf.png) no-repeat center right;
  padding-right: 20px;
}

* 참고: 
https://www.impressivewebs.com/css3-attribute-selectors-substring-matching/
https://www.w3.org/TR/selectors/#attribute-substrings