[CSS] 문자열 속성 [ ~= / |= / ^= / $= ]

📌 문자열 속성 선택자

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

 

🔊 1) 선택자[속성명 ~= "특정값"] { CSS코드; }

 

띄어쓰기로 구분되어 있는 여러 속성 값이 작성된 속성 중

속성 값이 특정 값을 단어로 포함하는 요소를 선택  

 

✅ CSS 작성 

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

✅ HTML 작성

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

✅ 결과화면 =  name중  aaa가 들어가는 단어에 darkblue색상 넣기

 

🔊 2) 선택자[속성명 |= "특정값"]{ CSS 코드; }

 

속성값이 특정값을 단어로 포함하는 요소를 선택

단, "-" 기호로 구분, "-" 앞의 내용이 동일해야한다. 

 

✅ CSS 작성 

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

✅ HTML 작성

div[class |= "str" ]{
    color: yellow; /* 글자색 */
    font-weight: bold;/* 글꼴굵기 */
}

✅ 결과화면 = 속성명이 str로 시작되는 3개 글자색 yellow로 변함

 

 

🔊 3) 선택자[속성명 ^= "특정값"]{ CSS 코드; }

속성 값이 특정 값으로 시작하는 요소를 선택 /  ( ^ : 캐럿)

✅ CSS 작성 

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

✅ HTML 작성

 

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

✅ 결과화면 = 속성명이 class로 시작되는 1개 배경색 black로 변함

 

 

 

 

🔊 4) 선택자[속성명 $= "특정값"] { CSS코드; }

속성 값이 특정 값으로 끝나는 요소를 선택

 

 

✅ CSS 작성 

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

✅ HTML 작성

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

✅ 결과화면 = 속성명이 class2로 끝나는 되는 1개 글자크기 변함

 

🔊 5) 선택자[속성명 *= "특정값"] { CSS코드; }

속성 값이 특정한 값을 포함하는 요소 선택

 

✅ CSS 작성 

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

✅ HTML 작성

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

✅ 결과화면 = 속성명이 class2로 끝나는 되는 1개 테이블요소 추가