7-6. CSS 선택자 : 속성 선택자(단순속성, 정확 속성값, 부분 속성값)

7-6. CSS 선택자 : 속성 선택자

 

 가. 단순 속성 선택자 

 

  1) 정의

 

   - 속성이름을 선택자로 하는 것

   - 선택자 작성시 대괄호( [, ] ) 안에 속성이름을 작성

   - 문서 내 해당 HTML 태그 중에 해당 속성이름을 포함한 요소에 해당 스타일 규칙이 적용됨

 

  2) 예시

   

    [CSS]

    1  p[class]{color: red;}

    2  p[class][id]{text-decoration: underline;}

 

    [HTML]

    1 <p class="임의속성값A">강남</p>

    2 <p class="임의속성값A" id="임의속성값B">강북</p>

                             ↓

    [결과]

    - p[class] 선택자 규칙은 p 태그에 class 속성만 가지면 적용되기에, 2가지 요소에 다 적용되어 강남, 강북

      으로 적용됨

    - 그리고 p[class][id] 선택자 규칙은 p 태그에 class 속성과 id 속성 모두 있는 요소에만 적용되기에,

      마지막 요소에만 추가 적용되어 강북으로 최종 적용됨

 

나. 정확한 속성값 선택자 

 

  1) 정의

 

   - 속성이름 및 속성값 전부를 선택자로 하는 것

   - 선택자 작성시 대괄호( [, ] ) 안에 속성이름 및 속성값을 작성

   - 문서 내 해당 HTML 태그와 속성이름 및 속성값을 포함한 요소에 해당 스타일 규칙이 적용됨

 

  2) 예시

   

    [CSS]

    1  p[class="임의속성값A"]{color: red;}

 

    [HTML]

    1 <p class="임의속성값A">강남</p>

                             ↓

    [결과]

    - p[class="임의속성값A"] 선택자 규칙은 p 태그에 class 속성이고, 속성값은 "임의속성값A" 이면 위

      스타일 규칙이 적용되므로, 강남 으로 적용됨

 

다. 부분 속성값 선택자 

 

  1) 정의

 

   - '정확한 속성값 선택자' 처럼 속성이름 및 속성값 전부를 선택자로 하는 것이나, 

   - 속성이름과 '=' 기호 사이에 기호(~, ^, $, *)가 들어감

   - 선택자 작성시 대괄호( [, ] ) 안에 속성이름, 기호 및 속성값을 작성

 

  2) 종류

 

  ■ [class~="A"] : class 속성 및 그 속성값이 A의 앞 또는 뒤에 공백(띄어쓰기)이 되어있는 요소를 선택

  ■ [class^="A"] : class 속성 및 그 속성값이 A로 시작하는 요소를 선택

  ■ [class$="A"] : class 속성 및 그 속성값이 A로 끝나는 요소를 선택

  ■ [class*="A"] : class 속성 및 그 속성값이 A가 포함되는 요소를 선택

 

  3) 예시

   

    [CSS]

    1  p[class~="color"]

    2  p[class^="color"]

    3  p[class$="color"]

    4  p[class*="color"]

                                   ↓

    [HTML]

    1 <p class="color hot">          ← p[class~="color"] / p[class^="color"] / p[class*="color"] 적용

    2 <p class="cool color">         ← p[class~="color"] / p[class$="color"] / p[class*="color"] 적용

    3 <p class="colorful nature"> ← p[class^="color"] / p[class*="color"] 적용