[CSS] 문자열 속성 선택자

1. 선택자[속성^=값] : 속성 안의 값이 특정 값으로 시작하는 태그를 선택

2. 선택자[속성&=값] : 속성 안의 값이 특정 값으로 끝나는 태그를 선택

3. 선택자[속성*=값] : 속성 안의 값이 특정 값을 포함하는 태그 선택

1 선택자에 대한 예는 다음과 같다.

예를 들어 다음과 같이 박스가 1 ~ 5개가 있다.

<div class="box_1">box 1</div>
<div class="box_2">box 2</div>
<div class="box_3">box 3</div>
<div class="div_1">box 4</div>
<div class="div_2">box 5</div>

이때,  다음과 같이 했을 경우

div[class^=box] { background-color: red }

div 중 class 명이 box로 시작하는 div에 백그라운드 색상을 빨강으로 하라는 것이므로,

class 가 box_1, box_2, box_3 인 box1, 2, 3만 배경이 빨간색으로 바뀐다.

다음 2 선택자에 대한 예가 다음과 같을 경우에는

div[class$=1] { background-color: red }

div 중 class 명이 1으로 끝나는 div에 백그라운드 색상을 빨강으로 하라는 것이므로,

class 가 box_1, div_1 인 box1, box4만 배경이 빨간색으로 바뀐다.