CSS 선택자3

• 문자열 속성 선택자
  : 속성값의 문자열을 확인하여 스타일 적용하는 방식의 선택자
  
  1) 선택자[ 속성명 ~= "특정값" ]{ CSS코드; }
   → 띄어쓰기로 구분되어있는 여러 속성값이 작성된 속성 중
       속성값이 특정값을 단어로 포함하는 요소를 선택
  
  2) 선택자[ 속성명 |= "특정값"]{ CSS코드; }
  → 속성값이 특정값을 단어로 포함하는 요소를 선택
      단, "-" 기호로 구분, "-" 앞의 내용이 동일해야함
  
  3) 선택자[ 속성명 ^= "특정값"]{ CSS코드; }
  → 속성값이 특정값으로 시작하는 요소를 선택
   ※ ^ : 캐럿
  
  4) 선택자[ 속성명 $= "특정값"]{ CSS코드; }
  → 속성값이 특정값으로 끝나는 요소를 선택
  
  5) 선택자[ 속성명 *= "특정값"]{ 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>

/* ~= : 여러 속성 값 중 하나라도 일치하면 선택 */
div[name~="aaa"]{
    background-color: yellowgreen;
}

/* |= : "-" 기호 앞쪽 단어가 일치하는 요소 선택 */
div[class |= "str"]{
    font-weight: bold; /* 글꼴 굵기 */
    color: yellow;
}

/* ^= : 특정 값으로 시작하는 요소 선택 */
div[class ^= "class"]{
    background-color: black;
    color: white;
}

/* $= : 특정 값으로 끝나는 요소 선택 */
div[class $= "class2"]{
    font-size: 24px;
}

/* *= : 특정 값을 포함하는 요소 선택 */
div[name *= "2"]{
    border: 3px solid red;
}