문자열 속성 선택자

속성값의 문자열을 확인하여 스타일을 적용하는 방식의 선택자

1. 선택자[속성명 ~= "특정값"] { CSS 코드; }
   -> 띄어쓰기로 구분되어있는 여러 속성 값이 작성된 속성 중 속성값이 특정 값을 단어로 포함하는 요소를 선택
2. 선택자[속성명 |= "특정값"] { CSS 코드; }
   -> 속성값이 특정 값을 단어로 포함하는 요소를 선택
   단, "-" 기호로 구분, "-" 앞의 내용이 동일해야 한다.
3. 선택자[속성명 ^= "특정값"] { CSS 코드; }
   -> 속성값이 특정값으로 시작하는 요소를 선택 ( ^ : 캐럿)
4. 선택자[속성명 $= "특정값"] { CSS 코드; }
   -> 속성값이 특정값으로 끝나는 요소를 선택
5. 선택자[속성명 *= "특정값"] { CSS 코드; }
   -> 속성값이 특정값을 포함하는 요소를 선택

html code

<div name="aaa bbb str-1" class="str-class"> div1 </div>
    <div name="str-2 aaa" class="str-class"> div2 </div>
    <div name="str" class="class-str"> div3 </div>
    <div name="aaa str-3" class="str-class2"> div4 </div> 

css code

div[name ~= "aaa"] {
    background-color: greenyellow;
}

div[class |= "str"] {
    color: red;
    font-weight: bold;
}

div[class ^= "class"] {
    background-color: black;
    color: white;
}

div[class $= "class2"] {
    font-size: 30px;
}

div[name *= "2"] {
    border: 3px solid blue;
}