1. 속성 선택자(attribute selectors)

  - 특정 속성이나 특정 속성값을 가지고 있는 HTML 요소를 선택한다.

 

2. 기본 속성 선택자

  • [속성이름] 선택자
  • [속성이름="속성값"] 선택자

2-1 [속성이름]

<style>
    [title] {
        color: red;
    }
    [href] {
        color: gray
    }
</style>
<body>
    <h2>[속성이름] 선택자</h2>
    <p title="first-p">first</p>
    <a href="http://naver.com">네이버</a>
</body>

  - 특정 속성을 가지고 있는 요소를 모두 선택한다.

 

2-2 [속성이름="속성값"] 선택자

<style>
    [title="first"] {color: red;}
</style>
<body>
    <h2>[속성이름*="속성값"] 선택자</h2>
    <p title="first">first</p>
    <p title="first-1">first-1</p>
    <p title="1-first">1-first</p>
    <p title="first_">first_</p>
    <p title="_first">_frist</p>
    <p title=" first">[공백]first</p>
    <p title="first ">first[공백]</p>
    <p title="firstsecond">firstsecond</p>
    <p title="secondfirst">secondfirst</p>
</body>

  - 특정 속성을 가지고 있으며, 해당 속성의 속성값까지 일치하는 요소를 모두 선택한다.

  - 하이픈(-)이 있으면 선택되지 않는다

  - 언더바(_)가 있으면 선택되지 않는다.

  - 공백이 있으면 선택되지 않는다.

  - 합성어가 있으면 선택되지 않는다.

 

3. 문자열 속성 선택자

  • [속성이름~="속성값"] 선택자
  • [속성이름|="속성값"] 선택자
  • [속성이름^="속성값"] 선택자
  • [속성이름$="속성값"] 선택자
  • [속성이름*="속성값"] 선택자

 

3-1 [속성이름~="속성값"] 선택자

<style>
    [title~="first"] {color: red;}
</style>
<body>
    <h2>[속성이름~="속성값"] 선택자</h2>
    <p title="first-1">first-1</p>
    <p title="1-first">1-first</p>
    <p title="first_">first_</p>
    <p title="_first">_frist</p>
    <p title=" first">[공백]first</p>
    <p title="first ">first[공백]</p>
    <p title="firstsecond">firstsecond</p>
    <p title="secondfirst">secondfirst</p>
</body>

  - 특정 속성의 속성값에 특정 문자열로 이루어진 하나의 단어를 포함하는 요소를 모두 선택한다.

  - 하이픈(-)이 있으면 선택되지 않는다

  - 언더바(_)가 있으면 선택되지 않는다.

  - 공백이 있어도 선택된다.

  - 합성어가 있으면 선택되지 않는다.

 

3-2 [속성이름|="속성값"] 선택자

<style>
    [title|="first"] {color: red;}
</style>
<body>
    <h2>[속성이름|="속성값"] 선택자</h2>
    <p title="first-1">first-1</p>
    <p title="1-first">1-first</p>
    <p title="first_">first_</p>
    <p title="_first">_frist</p>
    <p title=" first">[공백]first</p>
    <p title="first ">first[공백]</p>
    <p title="firstsecond">firstsecond</p>
    <p title="secondfirst">secondfirst</p>
</body>

  - 특정 속성의 속성값이 특정 문자열로 이루어진 하나의 단어로 시작하는 요소를 모두 선택한다.

  - "first" 뒤에 하이픈(-)이 있어도 선택된다.

  - 언더바(_)가 있으면 선택되지 않는다.

  - 공백이 있으면 선택되지 않는다.

  - 합성어가 있으면 선택되지 않는다.

 

3-3 [속성이름^="속성값"] 선택자

<style>
    [title^="first"] {color: red;}
</style>
<body>
    <h2>[속성이름^="속성값"] 선택자</h2>
    <p title="first-1">first-1</p>
    <p title="1-first">1-first</p>
    <p title="first_">first_</p>
    <p title="_first">_frist</p>
    <p title=" first">[공백]first</p>
    <p title="first ">first[공백]</p>
    <p title="firstsecond">firstsecond</p>
    <p title="secondfirst">secondfirst</p>
</body>

  - 특정 속성의 속성값이 특정 문자열로 시작하는 요소를 모두 선택한다.

  - "first" 뒤에 하이픈(-)이 있어도 선택된다.

  - "first" 뒤에 언더바(_)가 있어도 선택된다.

  - "first" 뒤에 공백이 있어도 선택된다.

  - "first"로 시작하는 합성어도 선택된다.

 

3-4 [속성이름$="속성값"] 선택자

<style>
    [title$="first"] {color: red;}
</style>
<body>
    <h2>[속성이름$="속성값"] 선택자</h2>
    <p title="first-1">first-1</p>
    <p title="1-first">1-first</p>
    <p title="first_">first_</p>
    <p title="_first">_frist</p>
    <p title=" first">[공백]first</p>
    <p title="first ">first[공백]</p>
    <p title="firstsecond">firstsecond</p>
    <p title="secondfirst">secondfirst</p>
</body>

  - 특정 속성의 속성값이 특정 문자열로 끝나는 요소를 모두 선택한다.

  - "first" 앞에 하이픈(-)이 있어도 선택된다.

  - "first" 앞에 언더바(_)가 있어도 선택된다.

  - "first" 앞에 공백이 있어도 선택된다.

  - "first"로 끝나는 합성어도 선택된다.

 

3-5 [속성이름*="속성값"] 선택자

<style>
    [title*="first"] {color: red;}
</style>
<body>
    <h2>[속성이름*="속성값"] 선택자</h2>
    <p title="first-1">first-1</p>
    <p title="1-first">1-first</p>
    <p title="first_">first_</p>
    <p title="_first">_frist</p>
    <p title=" first">[공백]first</p>
    <p title="first ">first[공백]</p>
    <p title="firstsecond">firstsecond</p>
    <p title="secondfirst">secondfirst</p>
</body>

  - 특정 속성의 속성값에 특정 문자열을 포함하는 요소를 모두 선택한다.

  - 앞뒤 공백, 하이픈(-), 언더바(_), 합성어 모두 선택된다.

 

4. 정리

선택자 하이픈(-) 언더바(_) 공백 합성어
[속성이름="속성값"] X X X X
[속성이름~="속성값"] X X O X
[속성이름|="속성값"] O X X X
[속성이름^="속성값"] O O O O
[속성이름$="속성값"] O O O O
[속성이름*="속성값"] O O O O

 

 

저작자표시 비영리

'FrontEnd > Css' 카테고리의 다른 글

[CSS] 의사 요소(pseudo-element)  (0) 2021.07.31
[CSS] 구조 의사 클래스(structural pseudo-class)  (0) 2021.07.30
[CSS] float  (0) 2021.07.30
[CSS] position, z-index  (0) 2021.07.29
[CSS] display, visibility, opacity  (0) 2021.07.27

티스토리툴바