CSS 선택자 3

✏️문자열 속성 선택자 :

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

<예시 확인용 코드>

    <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>

1) 선택자[속성명 ~="특정값"] {css 코드 ; }
-> 띄어쓰기로 구분되어 있는 여러 속성 값이 작성된 속성 중 속성값이 특정 값을 단어로 포함하는 요소를 선택
~= : 여러 속성 값 중 하나라도 일치하면 선택
EX)
div 중 name에 aaa가 있는 것들

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

➡️ div1, div2, div3

2) 선택자[속성명 |= "특정값"] {css 코드 ;}
-> 속성값이 특정 값을 단어로 포함하는 요소를 선택
단, "-" 기호로 구분, "-" 앞의 내용이 동일해야 한다.
|= : "-" 기호 앞쪽 단어가 일치하는 요소 선택
EX)
div 태그 중에 class 속성 가진 것 중에 -기호 앞에가 str인 것들

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

➡️ div1, div2, div4

3) 선택자[속성명 ^= "특정값"] {css 코드 ;}
(^ : 캐럽)
-> 속성값이 특정값으로 시작하는 요소를 선택
^=: 특정값으로 시작하는 요소 선택
EX)
div 속성 중에 class가 class라는 단어로 시작하는 것

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

➡️ div3

4) 선택자[속성명 $= "특정값] {css 코드 ;}
-> 속성값이 특정값으로 끝나는 요소를 선택
$= : 특정값으로 끝나는 요소 선택
EX)
div 태그 중에 class 속성 갖고 있는 것 중 class2로 끝나는 것

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

➡️ div2

5) 선택자[속성명 *= "특정값] {css 코드 ;}
-> 속성값이 특정값을 포함하는 요소를 선택
*= : 특정 값을 포함하는 요소 선택
EX)
div 태그 중 name 속성을 가진 것 중에 2라는 문자를 포함하고 있는 것

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

➡️ div2